带有固定标题的JQuery页面滚动问题

Question

当使用以下代码单击链接时，我正在使用一行 JQuery 将我的用户引导到页面的右侧：

$('html, body').animate({ scrollTop: $("#cell_" + scrollTo).offset().top }, 1500);

它工作正常并滚动到页面上的正确位置。但是，我在页面顶部有一个固定的导航栏（高度：49px；位置：固定；）在滚动时会在页面顶部出现问题。当页面向下滚动到所需内容时会出现问题，但随后会继续在导航栏下方滚动，从而遮挡视线。

我的问题是，如何修改上面的代码来补偿导航栏？

非常感谢任何帮助，

林登

Answer 1

您将需要获取标题的 outerHeight 并将其从您滚动到的数量中减去。

var scrollToPosition = parseInt($("#cell_" + scrollTo).offset().top) - parseInt($('#header').outerHeight());

if (scrollToPosition < 0) { scrollToPosition = 0 } // make sure it is not negative

$('html, body').animate({ scrollTop: scrollToPosition }, 1500);