jQuery动画滚动条位置

Question

我在一个设置了hidden溢出的

标签中有很多section标签。代码大致如下：

<div id="viewport">
   <section>
      content
   </section>
   <section>
      content
   </section>
</div>

我这样设置是因为我想在菜单中按下相应链接时能够滚动到包含在 div 中的 sections。我有这个函数：

$('#mn a').click(function(){
   var aHref = $(this).attr("href");
   var sectionHeight = $('section'+aHref+'').height();
   $('#viewport').height(sectionHeight);
});

我使用它来调整#viewport div 的大小，因为sections的大小不同。当我尝试将此滚动部分放入该函数中时：

$('body,html').animate({scrollTop: $(aHref).offset().top}, 800);

当我尝试用$('section, #viewport')代替$('body,html')时，它只会在div内滚动，但无法正常滚动。这使整个页面都滚动。

我有一个实时示例here。我认为这可能与.offset()或我传递给.animate()有关，但我已经尝试了许多不同的方法，但都没有成功。请问有人可以指点我方向或告诉我我做错了什么吗？

- ayyp

Answer 1

问题在于position()方法的工作方式，它返回与 scrollTop 相关的 top/height 值。

因此，如果您在单击时请求 $('section'+aHref+'').position().top，那么返回的位置会根据 scrollTop 值进行修改。

您可以在就绪事件中获取所有高度位置（因此 scrollTop 为 0）。

或者您可以使用以下代码清理位置值：

$("section#skills").position().top + $("#viewport").scrollTop()

- InuYaksa

Answer 2

首先，为了将页面滚动到页面顶部，您应该防止锚链接的默认行为。您可以在click事件处理程序内调用事件对象上的preventDefault()方法来实现此目的。试试这个：

$('#mn a').click(function(e){
   e.preventDefault();

   var aHref = $(this).attr("href");
   var top = $('section'+aHref+'').position().top;
   $('#viewport').animate({scrollTop: top}, 800);
});

- ShankarSangoli

---

我之前在代码里加了 e.preventDefault()，但是因为某些原因我认为它可能会影响到其他部分，所以把它删掉了。不幸的是，你提出的解决方案也没有起作用。 - ayyp

你能否警告 sectionHeight 并查看你得到什么？ - ShankarSangoli

第一个是255。它使其来回滚动，但从未完全到达底部。 - ayyp

我将其托管在这里：http://andrewpeacock.tumblr.com/testingscroll2。加载后，如果我单击任何链接，则完美运行。之后它就不再起作用了。 - ayyp

Answer 3

如果你想要一个简单的jQuery插件来实现这个功能，那么你可以尝试使用(AnimateScroll)，它目前支持30多种缓动样式。

- Ram Patra