Jquery scrollTop 不适用于 slideToggle 和隐藏的 div答案

【问题标题】：Jquery scrollTop not working with slideToggle and hidden divJquery scrollTop 不适用于 slideToggle 和隐藏的 div
【发布时间】：2012-03-05 21:43:46
【问题描述】：

我隐藏了一个 div，当单击链接时，它会将内容切换为滑出。不幸的是，当它显示在页面的最底部时，我无法让它向下滚动到 div 的顶部。我已经使用常规 javascript 完成了此操作，但我希望使用 Jquery 来完成。

jquery：

// Toggle Terms
$('.toggleTerms').click(function(){
$('#displayTerms').slideToggle("slow", function(){
    if($('#displayTerms').is(":visible")){
        $('#displayTerms').animate({
            scrollTop: $('#displayTerms').position().top
        }, "slow"
    )}
});

});

链接：

<a href="javascript:void(0);" class="toggleTerms">Terms</a>

内容：

<div id="displayTerms" style="display:none; overflow:hidden;">The Terms</div>

顺便说一句，它打开和关闭都很好。以上是我目前所拥有的。

【问题讨论】：

如果你想滚动页面，试试$(document).animate吧。
我有，它也不起作用。

标签： jquery css jquery-animate slidetoggle scrolltop

【解决方案1】：

看看这个：

http://fiddle.jshell.net/GDtHJ/

这里我设置的是body的滚动位置而不是#displayTerms - 因为我们希望body的位置移动到#displayTerms的顶部。

希望这会有所帮助。

哦，您可能需要调整浏览器的大小，以确保它在 jsfiddle 的右下方窗格中有一个滚动窗口 - 否则您不会看到它滚动：P

【讨论】：

感谢您尝试解决此问题，但它不会跳到您的目标。窗口只扩展而不是“滚动到”那个 div。
我最后一个在 FF 和 chrome 中为我工作，但不是 IE。对其进行了编辑，现在它适用于所有 3。
我让你的代码可以使用 scrollTop: $('#displayTerms').offset().top

【解决方案2】：

感谢尼克西蒙尼让我更接近。答案是；

// Toggle Terms
$('.toggleTerms').click(function(){
$('#displayTerms').slideToggle("slow", function(){
    if($('#displayTerms').is(":visible")){
        $("html, body").animate({scrollTop: $('#displayTerms').offset().top});
    }
});
});

【讨论】：