1

现在这是我的问题,这是一个带有粘性菜单(#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底部?提前一百万谢谢!

4

1 回答 1

3

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

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

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

于 2011-10-08T15:06:36.497 回答