Question

我一直在用两个不同的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>

Answer 1

我不知道这个插件，但基于什么有用，比如（假设最近的JQuery）：

$('a.thumbnail').on('click', function() {
  var to = $(this).attr('href'); // $(this) is the clicked link. We store its href.
  $('html, body').animate({ scrollTop: $(to).offset().top }, 2000);
)};

如果你的JQuery是＆lt; 1.7，您可以尝试.click（），无论JQuery版本如何都可以使用：

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

Answer 2

mddw提到的是什么有效，除非它会导致一个相当大的闪烁，除非你阻止浏览器的默认操作如下（同样，他的结束括号的顺序错误）：

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

如何使用Bootstrap实现平滑滚动？

2 个答案: