Jquery scrollTop无法使用slideToggle和隐藏的div

时间:2012-03-05 21:43:46

标签: jquery css jquery-animate slidetoggle scrolltop

我隐藏了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>
不过,它打开和关闭就好了。以上就是我到目前为止。

2 个答案:

答案 0 :(得分:0)

看看这个:

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

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

希望这有帮助。

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

答案 1 :(得分:0)

感谢Nick Simone让我更接近。答案是;

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