Jquery SlideToggle 和滚动

Question

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

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

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

谢谢

Answer 1

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

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

很抱歉，我没有为此创建测试用例，因为我只是草率地进行拍摄，但如果它不像广告中那样工作，请告诉我，我将调整代码。