使用粘滞菜单平滑滚动

Question

现在这是我的问题，这是一个带有stickymenu的单页网站（#main-menu）。 ＃main-menu固定在该位置。第一张图片显示了当我点击菜单上的“关于”链接时页面应该是什么，该页面将在#about上顺利滚动。

但是在Image Two上，我的网站正在呈现什么，当我点击“关于”链接时，关于我们标题滚动到顶部并隐藏在#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）以避免在链接目标位于最顶端时滚动到负偏移量。