Question

请帮助我解决以下问题。单击各个链接时，我试图实现平滑滚动。面临的问题是滚动到该部分的顶部隐藏在固定标题（高度为150px）的后面。这是正在使用的平滑滚动脚本。不知道如何完成这项工作。我尝试添加-150px。但是它不能正常工作。请帮忙。

$('.smoothscroll').on('click', function (e) {
    e.preventDefault();
    var target = this.hash,
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top -150}, 'slow','swing').promise().done(function () {
            // check if menu is open
            if ($('body').hasClass('menu-is-open')) {
                $('.menu-toggle').trigger('click');
            }
            window.location.hash = target;
        });
    });

Answer 1

您可以使用纯粹的JavaScript功能来实现自己的愿望，jQuery会使代码变得肮脏。参见下面的代码：

window.scroll({
   behavior: 'smooth',
   top: 0,
   left: 0
});

此代码可以将您滚动到顶部坐标的0偏移和左侧坐标的0偏移，而不是零，您可以设置所需的偏移。

您可以将其作为功能：

const smoothScroll = (topOffset, leftOffset) => {
    window.scroll({
        behavior: 'smooth',
        top: topOffset,
        left: leftOffset
    });
};

如果还有其他问题，请发表评论，我会为您更改或编辑答案。

偏移顶部-150px期间的滚动顶部跳转问题

1 个答案: