Question

我有一个如下所示的链接，当点击它时，将用户向下滚动到#contactHeader元素。我想要做的是滚动到200px上面#contactHeader，而不是直接到它。有没有什么方法可以添加实现-200px检查的规则，以便它滚动到元素上方200px？

<li><a id="scrollToContact" href="#">&bull;</a></li>

$("#scrollToContact").click(function() {
            $('html, body').animate({
            scrollTop: $("#contactHeader").offset().top
        }, 1000);
    });

Answer 1

offset().top属性返回一个整数，因此您可以从中减去它以滚动到页面中的更高位置：

$("#scrollToContact").click(function() {
    $('html, body').animate({
        scrollTop: $("#contactHeader").offset().top - 200
    }, 1000);
});

Answer 2

只需将- 200添加到scrollTop行的末尾。

$("#scrollToContact").click(function() {
    $('html, body').animate({
        scrollTop: $("#contactHeader").offset().top - 200
        // Here -----------------------------------^^^^^^
    }, 1000);
});

或者如果标题可能位于页面顶部的200px之内，您可能需要在其中抛出Math.max：

$("#scrollToContact").click(function() {
    $('html, body').animate({
        scrollTop: Math.max(0, $("#contactHeader").offset().top - 200)
    }, 1000);
});

Answer 3

scrollTop: $("#contactHeader").offset().top -200

如何使用JQuery滚动到元素上方/下方的设定距离？

3 个答案: