滚动到带有偏移量的 div ID

Question

我目前正在 Wordpress 上运行一个测试站点。我的页面有几个带有 ID 的 div，顶部有一个菜单，带有指向这些 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. 我的浏览器导航到偏移量为 - 90px 的#someid（到目前为止它运行良好）
3. 然后我的浏览器向下滚动 90px，到 div #someid 在视口开头（和粘性标题后面）开始的位置。
4. 最后我的 URL 更改为http://example.com/#someid

我只想删除第 3 步。非常感谢任何帮助。

更新：我刚刚发现我的主题安装了 jQuery“One-page-nav”插件并且它正在干扰。仍在尝试了解它是如何工作的，以及我是否可以修改它以获得偏移量

Answer 1

我遇到了同样的问题，在我的情况下，我通过添加 padding-top 和相同值的负边距顶部来解决它：

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

通过这样做，我的元素看起来像是在完全相同的位置，但浏览器在滚动时会更快地找到它。您可以将这些值设置为粘性标题的高度，或者四处看看以确保标题正是您想要的位置。

我希望我能以一种可以理解的方式解释这一点......这在我的脑海中肯定是有道理的：D