Jquery的scrollTop不能与sli​​deToggle和隐藏的div一起使用

标签 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>

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

最佳答案

看看这个:

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

这里我对主体的滚动位置而不是 #displayTerms 进行动画处理 - 因为我们希望主体的位置移动到 #displayTerms 的顶部。

希望这有帮助。

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

关于Jquery的scrollTop不能与sli​​deToggle和隐藏的div一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9574469/

相关文章:

javascript - PHP处理后不会自动重新加载

javascript - Highcharts 问题更新图表类型 : not recognizing highcharts functions

html - 哪种 CSS lang 语法最适合本地化的 HTML 元素?

css - IE/ME - 使用 Bootstrap 4 将中间按钮文本与 flex 垂直对齐

javascript - 放慢 jquery 动画

javascript - 在地址栏中使用唯一 URL 打开 Colorbox

css - 如何解决未打开导航栏的问题?

jquery - 单div可以实现列表项动画吗?

jquery - 阻止新的 CSS3 和 jQuery 动画,直到前一个动画完成

javascript - 带有json_encode的php mysql输出数组到javascript不产生输出