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

Question

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

所以，假设你有 jump to使用 anchor 标记的链接:

www.example.com/#about

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

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

现在，我想捕获这个scroll事件，以便我可以添加更多 offset浏览器应使用多少滚动量。

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

问候，

Answer 1

据我所知，无法直接拦截此行为，即没有与之关联的用户可访问事件。相反，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);
}