Question

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


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

我将它设置为这样，因为我希望能够在菜单中按下相应的链接时滚动sections中包含的div。我有这个功能：


$('#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);

它使整个页面滚动。当我尝试用$('body,html')替换$('section, #viewport')时，它会在div中滚动，但它没有正确地执行。

我有一个这个here的实例。我认为它与.offset()或我传入.animate()的内容有关，但我尝试过很多不同的东西，但无济于事。有人可以指出我正确的方向或告诉我我做错了什么？

Answer 1

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

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

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

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

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

Answer 2

首先，您应该阻止锚点的默认行为，以便将页面滚动到页面顶部。您可以通过在preventDefault()事件处理程序中的事件对象上调用click方法来执行此操作。试试这个

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

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

Answer 3

如果您想要一个简单的jquery插件来执行此操作，那么您可以尝试（AnimateScroll）当前支持超过30种缓动样式

jQuery动画scrollTop

3 个答案: