jquery - Jquery SlideToggle 和滚动

Question

我的页面底部出现的滑动切换链接有问题。实际上，我希望用户单击以显示/隐藏隐藏的 div（效果很好）

问题是页面不会向下滚动以显示现在，而不是隐藏的 div

作为一个 JQuery 新手，有什么方法可以切换 div 然后将其置于页面中心？或者至少向下滚动，而不会让事情变得太复杂？

谢谢

Answer 1

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

一般来说，直接设置页面滚动可能会有点不和谐的 UX。出于这个原因，我实际上将给您提供动画 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或类似的东西，以便将滚动设置在容器顶部上方几个像素处，但这取决于您。我发现我不喜欢我的元素与窗口的顶部边框对接。

抱歉，我没有为此创建测试用例，因为我是从臀部拍摄的，但如果它不像宣传的那样工作，请告诉我，我会调整代码。