Jquery SlideToggle 和滚动

Question

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

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

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

谢谢

Answer 1

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

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

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