滾動到帶有偏移量的div ID

Question

我目前正在Wordpress上運行一個測試站點。 我的頁面上有多個div，這些div具有ID，並且菜單頂部帶有指向這些ID的錨點。 我的標題是粘性的，因此當我單擊錨點時，它會導航到div ID，但div的開頭仍隱藏在標題下方。 我想要這樣，以便當我單擊錨點時，它可以導航到div，但其上方只有幾個像素。 我設法做到了，盡管有一點問題。

(function($,document){
  $("a[href^='#']").click(function(){
    var url = $(this).attr('href');
    $('html,body').animate({scrollTop: $(url).offset().top - 90}, 2000);
  });
})(jQuery);

發生的是：

1. 我單擊帶有href =“＃someid”的錨點
2. 我的瀏覽器導航到#someid，偏移量為-90px（到目前為止，它可以正常運行）
3. 然后，我的瀏覽器向下滾動90px，直到div #someid在視口的開始處（在粘性標頭之后）開始的位置。
4. 最后，我的網址更改為http://example.com/#someid

我只想刪除步驟3。非常感謝您的幫助。

更新：我剛剛發現我的主題安裝了jQuery“ One-page-nav”插件，並且該插件存在干擾。 仍在嘗試了解其工作原理以及是否可以對其進行修改以具有偏移量

Answer 1

我遇到了同樣的問題，在我的情況下，我通過添加相同值的padding-top和負margin-top解決了此問題：

.some-class {
  padding-top: 4em;
  margin-top: -4em;
}

這樣，我的元素看起來就在完全相同的位置，但是瀏覽器在滾動時會更快地找到它。 您可以將這些值設置為粘性頁眉的高度，或四處游動以確保標題正好位於您想要的位置。

我希望我以一種可以理解的方式來解釋這一點...在我腦海中這確實是有道理的：D