如何捕获由 hash bang 锚链接引起的滚动事件？

Question

我只是想知道是否有更好的方法来解决这个问题

因此，假设您有jump to使用锚标记的链接：

www.example.com/#about

打开该链接将使浏览器自动滚动到带有以下内容的部分

<div id="about"></div>

现在，我想捕获此scroll事件，以便我可以添加更多offset有关浏览器应使用多少滚动的信息。

这样做的原因是因为我有一个fixed消耗120px浏览器的导航菜单。

问候，

Answer 1

AFAIK 没有办法直接拦截此行为，即没有与之关联的用户可访问事件。相反，window.location.hash您可以使用。您可以找到关联的元素并在页面加载后跳转到该元素。

例如：

function jumpToElement(element, offset) {
  if (!offset) offset = 0;
  var verticalPos = element.offsetHeight;
  window.scrollTo(0, verticalPos + offset);
}
function jumpToHash(offset) {
  var hash = window.location.hash;
  // Do nothing if no hash exists
  if (typeof hash !== 'string' || !hash.length) return;
  var targetElement = document.querySelector(hash);
  // Do nothing if targetElement doesn't exist
  if (!targetElement) return;
  jumpToHash(targetElement, offset);
});
if (document.readyState === "complete") {
  jumpToHash(-120); // with 120px
} else {
  document.addEventListener("DOMContentLoaded", jumpToHash);
}