固定标题 CSS JS 的锚链接问题 - Javascript

在页面中使用固定标题可以帮助用户更好地导航和阅读内容。但是，在使用固定标题时，需要注意 CSS 和 JS 的锚链接问题。

CSS 中的锚链接

在 CSS 中，固定标题通过 position: fixed; 属性实现。但是，如果使用了锚链接，点击锚链接后页面会自动滚动到相应位置，导致标题被遮挡住。

解决办法是添加 padding-top 属性，保证页面滚动时标题不被遮挡。

h1 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 10px 0;
}

/* 添加 padding-top 属性 */
h1::before{
  display: block;
  content: " ";
  padding-top: 70px;
  margin-top: -70px;
  height: 0;
  visibility: hidden;
}

JS 中的锚链接

在 JS 中，使用锚链接也会产生类似的问题。如果直接使用锚链接跳转到指定位置，页面会自动滚动到相应位置。

解决办法是使用 js 动态计算位置并添加偏移量，以保证标题不被遮挡住。

<a href="#section1" onclick="smoothScroll('section1')">Jump to Section 1</a>

<script>
// 获取项的偏移量
function getElementOffset(el){
  const rect = el.getBoundingClientRect(),
  scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}

// 平滑滚动到指定位置
function smoothScroll(id){
  const target = document.getElementById(id),
  targetOffset = getElementOffset(target).top - 70;

  window.scrollTo({
    top: targetOffset,
    behavior: "smooth"
  });
}
</script>

以上就是在使用固定标题时需要注意的 CSS 和 JS 的锚链接问题。在实际开发中，务必注意这些细节，以提高用户体验。