header加了固定定位 原来页面的锚点链接位置不准确 使用vue2和js解决

在网页开发中，使用固定定位的头部（header）可能会导致页面上的锚点链接（例如使用 #section 的链接）定位不准确。这是因为固定定位的头部在页面滚动时会始终显示在顶部，从而影响了页面滚动的位置。

使用 Vue 2 和 JavaScript 解决这个问题的一种方法是，在页面滚动时动态地调整锚点链接的目标位置。以下是一个基本的实现思路：

1. 监听滚动事件 ：使用 JavaScript 的 scroll 事件监听页面的滚动行为。

2. 计算偏移量：当页面滚动时，计算固定头部的高度，并将其作为滚动的偏移量。

3. 调整锚点位置：当点击锚点链接时，计算当前滚动位置加上头部高度，然后滚动到锚点位置减去头部高度的位置。

下面是一个简单的实现示例：

<template>
  <div id="app">
    <header class="fixed-header">固定头部</header>
    <a href="#section1">跳转到 Section 1</a>
    <div class="content">
      <!-- 页面内容 -->
      <div id="section1">Section 1</div>
      <!-- 更多内容 -->
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.handleScroll();
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const headerHeight = this.$el.querySelector('.fixed-header').offsetHeight;
      window.addEventListener('click', (e) => {
        if (e.target.tagName === 'A' && e.target.getAttribute('href').startsWith('#')) {
          e.preventDefault();
          const targetScrollTop = document.querySelector(e.target.getAttribute('href')).offsetTop - headerHeight;
          window.scrollTo({
            top: targetScrollTop,
            behavior: 'smooth'
          });
        }
      });
    }
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }
};
</script>

<style>
.fixed-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}
.content {
  padding-top: 60px; /* 至少等于固定头部的高度 */
}
</style>

在这个示例中：

• 我们使用 Vue 的 mounted 钩子来设置滚动监听器，并在组件销毁前移除监听器。
• 使用 handleScroll 方法来计算并应用滚动的偏移量。
• 通过监听点击事件，并检查点击的是否是锚点链接，如果是，则计算目标位置并滚动到该位置。

请注意，这只是一个基本的示例，你可能需要根据你的具体需求进行调整。例如，你可能需要考虑在页面加载时锚点链接的初始定位，或者处理多个固定元素的情况。