jquery - 使用粘性菜单平滑滚动

Question

现在这是我的问题，这是一个带有粘性菜单(#main-menu)的一页网站。 #main-menu 固定在该位置。第一张图片显示了当我点击菜单上的“关于”链接时页面应该是什么样子，页面将在#about上平滑滚动。

但在图二上，我的网站正在呈现什么，当我单击“关于”链接时，“关于我们”标题滚动到顶部并隐藏在#main-menu上。

这是我的 JS 代码:

$('a').click(function(e) {
        var target = $(this).attr('href');
        e.preventDefault();

        $('html,body').animate({
            scrollTop: $(target).offset().top
        }, 800, 'easeInOutCirc');
    });

我如何让它停止直到#main-menu底部？提前一百万致谢!

Answer 1

您想从 offsetTop 中减去标题的高度。

$('html').animate({ // $(document.documentElement) works too
  scrollTop: Math.max($(target).offset().top - $('#your-header').outerHeight(), 0)
}, 800, 'easeInOutCirc');

添加 Math.max( ... , 0) 以避免当链接目标位于最顶部时滚动到负偏移。