Jquery SlideToggle和滚动条

Question

Jquery SlideToggle和滚动条

jqueryscrolltoslidetoggle

4

我在页面底部有一个slidetoggle链接出现了问题。

实际上，我希望用户单击以显示/隐藏隐藏的div（这很好用）。

问题是页面不会滚动到显示未隐藏的div。

作为JQuery新手，有没有办法切换div，然后将其居中在页面上？或者至少向下滚动，而不会变得过于复杂？

谢谢

- Andre

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lsuarez · Accepted Answer

为了执行此功能，我建议您从slideToggle调用中使用回调来使用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或类似的东西，这样滚动条就会设置在容器顶部上方几个像素，但这取决于你。我发现我不喜欢我的元素与窗口的上边框紧贴着。

很抱歉我没有为此创建一个测试案例，因为我只是临时想到的，但如果它不能正常工作，请告诉我，我会调整代码。