如何偏移与元素重叠的锚点滚动?

Question

如何将偏移量添加到元素哈希位置，以便窗口顶部的导航栏不会与我的内容重叠？

<nav id="nav">
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<main>
<section id="home">
<h2>Welcome to example.com</h2>
</section>
<section id="about">
<h1>About us</h1>
</section>
<section id="contact">
<h2>Contact us</h2>
</section>
</main>

我在互联网上找到的最简单的解决方案是向目标元素section{ margin-top:100px }添加一些margin-top或padding-top，但这会干扰我的设计，我不想使用隐藏元素来解决这个问题。

Answer 1

TL;博士

window.addEventListener("hashchange", function(e){
e.preventDefault()
const navHeight = document.getElementById("nav").offsetHeight
const target = document.getElementById(window.location.hash.substring(1))
window.scrollTo(0, target.offsetTop - navHeight)
})

遗憾的是，我不知道jQuery解决方案。

解释

那么这是如何工作的，我们将一个事件侦听器添加到正在寻找哈希更改的窗口中。 我们希望阻止默认浏览器滚动，并使用我们自己的"调整"滚动和偏移量。

如果您的页面顶部有一个始终显示的粘性导航，我们需要知道导航元素的高度。const navHeight = doc.getElementById("nav").offsetHeight

接下来我们将获取哈希位置，对于example.com/about.html#team，我们希望获取没有哈希符号的哈希位置window.location.hash.substring(1)，返回"team"

现在我们需要通过将返回的哈希位置传递给将返回目标元素的 document.getElementById(window.location.hash.substring(1((' 来获取目标元素。

现在我们做一些简单的数学来偏移导航元素，这样它就不会与有价值的内容重叠.
target.offsetTop - navHeight

作为最后一步，我们将新计算的偏移量传递给窗口滚动函数.
window.scrollTo(0, target.offsetTop - navHeight)