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

how to catch scroll event caused by hash bang anchor link?(如何捕捉hash bang锚链接引起的滚动事件？)

问题描述

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

所以，假设您有jump to使用锚标记链接：

www.example.com/#about

打开该链接将使浏览器自动滚动到带有

部分

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

现在，我要捕获此scroll事件，以便可以添加更多offset浏览器应使用的滚动量。

这是因为我有一个fixed导航菜单，它使用浏览器的120px。

问候，

推荐答案

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.getElementById(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);
}

这篇关于如何捕捉hash bang锚链接引起的滚动事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！