滚动到带有偏移量的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