jquery - 函数 scrollTo(id) 中的 jquery 偏移问题

Question

我正在这个网站上工作:Website

这是一个单页网站，我在其中使用 scrollTo(id) 请参阅此处的代码:

function scrollTo(id) { 
  $('html, body').animate({scrollTop: $(id).offset().top - 50}, 1000);
}

问题是，当您在主页顶部尝试按链接时，偏移量不起作用，并且几乎位于您要求的部分(页面)下方。 但是如果你滚动到页面底部，然后点击一个链接，偏移量就像一个魅力，它会让你正好在你要求的每个部分的顶部。

你可以查看我的源代码，我有一个 js.js 文件，它应该显示我正在使用的所有函数，也许还有一些我没有注意到的其他错误。 真的需要你的帮助:)!希望你能看到我做错了什么。

Answer 1

我认为这是因为你的菜单。

当您位于页面顶部时，您的菜单有一个静态位置，这也意味着菜单的高度会添加到浏览器滚动到的像素数中.

但是当浏览器向下滚动到该位置时，菜单将更改为固定位置，这意味着菜单的高度将从您想要的元素的顶部偏移量中减去滚动到。

就代码而言，我会简单地将这一小段 CSS 添加到正文中。

body.tiny { padding-top: 60px; }

假设60像素是菜单的高度。当菜单更改到固定位置时，高度将添加到 body 的内边距，像以前一样将内容向下推。

这样，当菜单将其位置更改为固定和反转时，您的滚动也会更加流畅。