怎么捕捉hash bang锚链接引起的滚动事件?

本教程将介绍如何捕捉hash bang锚链接引起的滚动事件?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

怎么捕捉hash bang锚链接引起的滚动事件? 教程 第1张

问题描述

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

所以,假设您有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锚链接引起的滚动事件?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。