jQuery动画scrollTop

Question

我section在div中有很多标签,溢出设置为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);
});

我用它来调整#viewportdiv的大小,因为sections它们的大小不同.当我尝试将此滚动部分放入该函数时:

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

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

我在这里有一个实例.我认为这与.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);
});