jQuery动画scrollTop

我有不少section标签在一个溢出设置为hidden。该代码是沿着这样的线：jQuery动画scrollTop


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

来源

2011-12-13 jezza-tan

问题是position()是如何工作的，它返回有关scrollTop顶部/高度。

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

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

或者你也可以用消毒位置值：

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

来源

2011-12-13 22:58:03 InuYaksa

首先，您应该防止锚点的默认行为，以便将页面滚动到页面的顶部。您可以通过在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); 
});

来源

2011-12-13 22:41:08 ShankarSangoli

我有`e.preventDefault（）`在那里，但我认为这是因为某种原因搞砸了所以我把它拿出来。不幸的是，你提出的解决方案也不起作用。 – 2011-12-13 22:44:06

你可以提醒'sectionHeight`并看看你得到了什么？ – ShankarSangoli 2011-12-13 22:45:18

-1

如果你想有一个简单的jQuery插件来做到这一点，那么你可以试试（AnimateScroll）目前支持超过30种宽松款式太

来源

2013-09-12 09:27:35

jQuery动画scrollTop

回答

相关问题