Question

我已经知道了：

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

但我有一个奇怪的情况，我正在处理的这个特定网站有一个固定的标题/横幅（200px高），当页面滚动时它仍然存在。如果我使用上面的例程，它会直接将元素滚动到窗口的顶部，但是标题/横幅将隐藏前200px的值（我不喜欢固定的标题/横幅，但我暂时不允许更改）。

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

提前感谢您对此问题的帮助。

Answer 1

问题是，当position：fixed时 - 页眉从页面流中移除，页面的其余部分呈现为好像不在那里 - 所以滚动到元素的数量将与报头中。

解决方案是，当您将标题的位置设置为固定时（如果它在滚动位置上更改） - 您还可以通过标题的高度设置主体的填充顶部。 如果标题始终固定在屏幕顶部并且不会根据滚动部分进行更改 - 那么只需将填充顶部直接应用于正文。

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

即可

 body {padding-top: 200px}

当标题有位置时：固定应用于它。

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

执行所有这些操作的最佳方法是使用header-offset等类，并在应用位置时将其应用于正文：fixed。

所以它会是

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

Answer 2

有很多方法可以做到这一点，但是使用$(body).animate({scrollTop: $("#id").offset().top - 200}, 'slow');会不会解决这个问题？