jquery滚动到不太顶部

Question

我已经知道:

$(body).animate({scrollTop: $("#id").offset().top}, 'slow');

但我遇到了一个奇怪的情况，我正在处理的这个特定网站有一个固定的标题/横幅(200 像素高)，当页面滚动时，该标题/横幅仍然保留在原处。如果我使用上面的例程，它实际上会将元素滚动到窗口顶部，但前 200px 的值将被标题/横幅隐藏(我不喜欢固定标题/横幅，但我目前不允许更改)。

所以，问题是:如何滚动到 top-200px 以便该元素滚动到标题/横幅的正下方？

预先感谢您针对此问题提供的帮助。

Answer 1

问题是，使用position:fixed - 标题从页面流中删除，并且页面的其余部分呈现为好像不存在一样 - 因此滚动到元素的量将与元素的高度相同。 header 。

解决方案是，当您将标题的位置设置为固定时(如果它在滚动位置上发生变化)，您还可以根据标题的高度设置正文的 padding-top 。 如果标题始终固定在屏幕顶部并且不会根据滚动部分而变化 - 那么只需将 padding-top 直接应用于正文即可。

因此，如果标题高度为 200px - 只需应用

 body {padding-top: 200px} 

当标题应用了position:fixed 时。

当标题返回到位置:静态时，不要忘记删除相同的填充。 - 假设应用粘性类时附加了一个滚动位置。

完成这一切的最佳方法是拥有一个类(例如 header-offset)，并在应用position:fixed 时将其应用于正文。

原来如此

.header-offset{padding-top: 200px; // or whatever height your header is}