Question

我的浏览器链接出现问题，该链接出现在我的页面底部。实际上我希望用户点击显示/隐藏隐藏的div（工作正常）

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

作为一个JQuery新手，有没有办法切换div然后将其置于页面中心？或者至少向下滚动，没有太复杂的事情？

由于

Answer 1

要执行此功能，我建议您使用slideToggle调用中的回调来使用scrollTop功能设置文档滚动。您可以使用offset确定toTled容器相对于页面的顶部位置，从而确定scrollTop setter的值。我建议限制滚动行为只在元素显示时触发，而不是隐藏。

通常，直接设置页面滚动可能会略微刺激一下UX。出于这个原因，我实际上会给你使用scrollTop设置动画而不是直接设置它的代码，但是这种方法不是必需的，因为直接调用scrollTop会同样定位页面。我只是认为作为一个用户，我宁愿看到一个渐进的滚动，而不是突然的位置变化。

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

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

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

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

Jquery SlideToggle和滚动

1 个答案: