jQuery 动画滚动顶部答案

【问题标题】：jQuery animate scrollTopjQuery 动画滚动顶部
【发布时间】：2011-12-13 22:18:57
【问题描述】：

我在一个 div 中有很多 section 标签，溢出设置为 hidden。代码大致如下：


<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() 的内容有关，但我尝试了很多不同的东西但无济于事。有人可以指出我正确的方向或告诉我我做错了什么吗？

【问题讨论】：

标签： javascript jquery animation scrolltop

【解决方案1】：

问题在于position() 的工作原理，它返回与scrollTop 相关的顶部/高度。

因此，如果您在点击时请求$('section'+aHref+'').position().top，则返回的位置会从scrollTop 值修改。

您可以在准备好的事件中获得所有高度位置。（所以scrollTop 是0）

或者您可以使用以下方法清理位置值：

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

【讨论】：

【解决方案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);
});

【讨论】：

我在里面有e.preventDefault()，但我认为它出于某种原因搞砸了，所以我把它拿出来了。不幸的是，您提出的解决方案也不起作用。
你能提醒sectionHeight看看你得到了什么吗？
第一个为 255。它使它来回滚动，但永远不会完全到底部。
我在这里托管它：andrewpeacock.tumblr.com/testingscroll2 加载后，如果我点击任何链接，它都会完美运行。之后它就不再起作用了。

【解决方案3】：

如果您想要一个简单的 jquery 插件来执行此操作，那么您可以尝试 (AnimateScroll)，它目前也支持 30 多种缓动样式

【讨论】：