Javascript 如何使用引导实现平滑滚动？

我已经花了两个小时与几个不同的jQuery插件一起努力，试图让平滑滚动为我的网站工作

以下是当前的相关代码：

<div class="row-fluid">
 <header class="span12 hero-unit">
 <ul class="thumbnails">
  <li class="span3"></li>
  <li class="span2">
   <a href="#Blog" class="thumbnail">
   <img src="images/nav_icon-01.png" alt="Blog"/>
   </a>
  </li>
  <li class="span2">
   <a href="#Projects" class="thumbnail">
   <img src="images/nav_icon-02.png" alt="Projects"/>
   </a>
  </li>
  <li class="span2">
   <a href="#Contact" class="thumbnail">
   <img src="images/nav_icon-03.png" alt="Contact"/>
   </a>
  </li>
  <li class="span3"></li>

 </ul>
 </header>
</div>

我已经删除了我所有的JS代码（因为我知道我没有正确使用其中任何一个，我想重新开始），除了这一个，因为这似乎确实有效，但只在页面加载时激活，我想知道是否有可能使它在点击时工作

<script type="text/javascript">
$('html, body').animate({
scrollTop: $("#Blog").offset().top
}, 2000);
</script>

$（'html，body'）。设置动画({
scrollTop:$（“#Blog”）.offset（）.top
}, 2000);

我不知道这个插件，但基于它的工作原理，比如（假设最近有一个JQuery）：

如果您的JQuery<1.7，则可以尝试。单击（），无论JQuery版本如何，它都会起作用：

$('a.thumbnail').click(function() {
  var to = $(this).attr('href');
  $('html, body').animate({ scrollTop: $(to).offset().top }, 2000);
});

---

mddw提到的方法是有效的，除了它会导致相当大的闪烁，除非您阻止浏览器的默认操作，如下所示（另外，他的结束括号顺序错误）：

---

谢谢你的快速回答！我把它放在了正文的末尾，这是实现它的正确方法吗？它仍然不起作用，很抱歉问了这么多愚蠢的问题。你的JQuery版本是最近的吗。on（）是在1.7中引入的。如果不是，你可以用。活着。你应该把脚本放在document ready（）中。嗨，现在我有了这个

$（document.ready（function（）{$（'a.thumbnail'）。在（'click'，function（）{var to=$（this.attr（'href'）；//$（this）是点击的链接。我们存储它的href.$（'html，body'）。动画（{scrollTop:$（to.offset（）.top}，2000）；）}；}）我不确定我的jQuery是否是最新的，如何检查？谢谢你的帮助。我应该在我的标题中写点什么吗/我如何调用jQuery？看起来你的最后一段代码的括号顺序不对，这会导致这段代码无法正常工作。“}；”实际上应该是“}”）；”。
$('a.thumbnail').click(function() {
  var to = $(this).attr('href');
  $('html, body').animate({ scrollTop: $(to).offset().top }, 2000);
});

$('a.thumbnail').on('click', function(event) {
  var to = $(this).attr('href');
  $('html, body').animate({ scrollTop: $(to).offset().top }, 500);
  event.preventDefault();
});