15

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

4

3 回答 3

11

问题是如何position()工作，它返回与scrollTop.

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

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

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

$("section#skills").position().top + $("#viewport").scrollTop()
于 2011-12-13T22:58:03.177 回答
8

首先，您应该阻止锚点的默认行为，以便将页面滚动到页面顶部。您可以通过在事件处理程序中调用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);
});
于 2011-12-13T22:41:08.613 回答
-1

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

于 2013-09-12T09:27:35.280 回答