6

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;
        });
    });
});
4

2 回答 2

21

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

通过添加 .top + (-40) 就可以了

$('html, body').stop().animate({
    'scrollTop': $target.offset().top + (-40)
}, 900, 'swing', function () {
    window.location.hash = target;
});
于 2014-07-20T07:50:38.270 回答
2

+40您实际想要成为的偏移量-40不起作用，因为一旦动画完成，浏览器就会执行它的默认反应，即使用id您传递给的元素window.location.hash

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

padding-top: 40px;
margin-top: -40px;

见小提琴

于 2013-05-13T18:35:12.693 回答