Jquery SlideToggle和滚动

Question

我有一个问题，滑动切换链接出现在我的页面底部。实际上，我希望用户单击以显示/隐藏隐藏的div (这很好用)

问题是页面不能向下滚动来显示now，而不是隐藏的div

作为JQuery新手，有没有什么方法可以切换div并使其在页面上居中？或者至少向下滚动，而不会让事情变得太复杂？

谢谢

Answer 1

要执行此函数，我建议使用scrollTop函数通过slideToggle调用的回调来设置文档滚动。您将能够通过使用offset获取切换的容器相对于页面的顶部位置来确定scrollTop设置器的值。我建议将滚动行为限制为仅在元素显示时触发，而不是隐藏。

通常，直接设置页面滚动可能是一个稍微不协调的用户体验。出于这个原因，我实际上将给您提供动画scrollTop的代码，而不是直接使用scrollTop函数设置它，但这种方法并不是必需的，因为直接调用scrollTop将同等地定位页面。我只是认为，作为一个用户，我宁愿看到一个渐进的滚动，而不是一个突然的位置变化。

例如，代码将采用以下形式：

$(".myShowHideLink").click(function() {
    $(".myToggleContainer").slideToggle("slow", function() {
        if ($(this).is(":visible")) {
            $(document).animate({
                scrollTop: $(this).offset().top
            }, "slow")
        }
    });
});

您可能希望实际使用$(this).offset().top - 50或类似的东西，以便滚动条设置在容器顶部的上方几个像素处，但这取决于您。我发现我不喜欢我的元素与窗口的顶部边框发生冲突。

我很抱歉我没有为此创建测试用例，因为我是信口开河，但如果它不能像广告宣传的那样工作，请让我知道，我会调整代码。