0

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

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

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

3 回答 3

2

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

$("#scrollToContact").click(function() {
    $('html, body').animate({
        scrollTop: $("#contactHeader").offset().top - 200
    }, 1000);
});
于 2013-10-25T11:12:24.993 回答
1

只需添加- 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);
});
于 2013-10-25T11:11:45.523 回答
1 
scrollTop: $("#contactHeader").offset().top -200
于 2013-10-25T11:12:19.290 回答