滚动到带有偏移量的 div ID

Posted 2023-05-08

【中文标题】滚动到带有偏移量的 div ID

【英文标题】：Scroll to div ID with offset

【发布时间】：2018-05-14 01:48:18

【问题描述】：

我目前正在 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);

会发生什么：

我单击带有 href="#someid" 的锚 我的浏览器导航到偏移量为 - 90px 的 #someid（目前运行良好） 然后我的浏览器向下滚动 90 像素，到 div #someid 在视口开头（在粘性标题后面）开始的位置。 最后我的 URL 变成了http://example.com/#someid

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

更新： 我刚刚发现我的主题安装了 jQuery "One-page-nav" 插件并且它正在干扰。仍在尝试了解它的工作原理以及是否可以对其进行修改以具有偏移量

【问题讨论】：

我的猜测是您的站点中某处有一个 jQuery 平滑滚动到锚点代码，该代码将自身绑定到所有 a 节点。首先执行您在此处的自定义代码，然后该代码将启动并准确滚动到锚点。也许只是 grep scrollTop？

我也是这么想的。我进行了搜索，发现一个名为 /* 使所有锚链接平滑滚动的部分我禁用了它，但它仍然不起作用

您是否确定您的浏览器没有加载相关脚本的缓存副本（或者仍在提供带有旧内容的缩小/组合版本）？至少听起来很有希望。另外，您查看过插件目录吗？可能只有两个 sn-ps 在做同样的事情。

【参考方案1】：

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

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

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

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