单击导航栏项目时在主容器中自动滚动

【问题标题】：autoscroll in main container when navbar item clicked单击导航栏项目时在主容器中自动滚动
【发布时间】：2014-02-24 12:30:32
【问题描述】：

我正在设计一个新的博客网站。在索引页面中，我将显示一个否。博客数（比如说 10 个）。主容器将显示博客标题和描述。

我有一个正确的导航栏，显示所有标题（只有标题，不是描述）我想要以下两件事

主容器中显示的标题（在侧导航栏中）将自动突出显示。
如果我点击任何标题，页面应该会自动滚动，以便向用户显示该博客。

我已经在很多页面中看到了这一点。有人可以告诉我如何实现吗？

我正在使用以下 JavaScript/CSS 库

jQuery
Twitter 引导程序3

【问题讨论】：

标签： jquery twitter-bootstrap-3

【解决方案1】：

这部分有一堆 jquery 解决方案。这是一个：How can I highlight a selected list item with jquery?
我在 Boostrap 3.0 中成功使用了以下脚本。只要在 li 中的 href 中添加 id 指示符（hashtag）即可：
```
<li><a href="#profile">PROFILE</a></li>
```

同样id到div中：

<div class="row" id="profile">

这个脚本可以工作：

<script>
  $(function() {
    $('ul#nav > li > a[href*=#]:not([href=#])').click(function() {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
      || location.hostname == this.hostname) {

    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top - 200
      }, 2000);
      return false;
      }
    }
   });
  });
</script>

【讨论】：