Question

当用户点击其href以“＃”开头的链接时，我正在使用以下代码来平滑移动

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

我需要在scrollTop值上添加大约40px，因此停止点可以覆盖内容。我将代码修改为此，但它似乎没有这样做（注意代码末尾的+40）：

$(document).ready(function(){
    $('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
        var target = this.hash,
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top + 40
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

Answer 1

我知道一个迟到的答案，但有人寻求解决方案可以试试这个。

通过添加.top +（ - 40）可以解决问题

$('html, body').stop().animate({
    'scrollTop': $target.offset().top + (-40)
}, 900, 'swing', function () {
    window.location.hash = target;
});

Answer 2

您实际想要成为+40的{{1}}偏移量无法正常工作，因为一旦动画完成，浏览器就会采用-40转到元素的默认反应你要转到id

您可以删除该行，也可以将以下css添加到正在滚动的元素中。

window.location.hash

请参阅FIDDLE

jQuery：向scrollTop添加额外的像素

2 个答案: