Vue 实现文章锚点定位，顶栏遮住了锚点，使用scrollTo代替scrollIntoView设置偏移量

在Vue中实现文章锚点功能，可以通过监听滚动事件来更新当前锚点的状态。以下是一个简单的示例：

<template>
  <div>
    <div :id="'anchor-' + index" v-for="(section, index) in sections" :key="index">
      {{ section.title }}
    </div>
    <ul class="nav nav-pills">
      <li v-for="(section, index) in sections" :key="index">
        <p @click="scrollToAnchor(index)" :style="{ color: (activeAnchor === index)?'red':'black' }">{{ section.title }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeAnchor: 0,
      sections: [
        { title: 'Section 1' },
        { title: 'Section 2' },
        { title: 'Section 3' },
        // ...
      ],
    };
  },
  mounted() {
    window.addEventListener('scroll', this.updateActiveAnchor);
    this.updateActiveAnchor(); // 初始调用以设置初始活动锚点
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.updateActiveAnchor);
  },
  methods: {
  //滚动到锚点位置
    scrollToAnchor(index) {
      const anchorElement = document.getElementById('anchor-' + index);
      if (anchorElement) {
        //anchorElement.scrollIntoView({ behavior: 'smooth' }); 顶栏遮住了锚点
        const fixedBarHeight = 63; // 假设顶栏高度px
window.scrollTo({
top: anchorElement.offsetTop - fixedBarHeight,
behavior: 'smooth'
});
      }
    },
    //根据屏幕滚动，显示当前活动锚点
    updateActiveAnchor() {
      this.sections.forEach((section, index) => {
        const element = document.getElementById('anchor-' + index);
        const fixedBarHeight = 63; // 假设顶栏高度是px
        if (element && window.scrollY >= element.offsetTop-fixedBarHeight) {
          this.activeAnchor = index;
        }
      });
    },
  },
};
</script>

在这个示例中，我们定义了一个sections数组来表示文章的不同部分。每个部分都有其对应的标题和唯一的ID。我们还维护了一个activeAnchor状态，它表示当前活动锚点的索引。

在模板中，我们使用v-for来遍历sections数组，并为每个部分创建一个可以滚动到的div元素。我们还创建了一个导航列表，其中包含了所有锚点的链接，并使用active类来表示当前活动的锚点。

在mounted钩子中，我们添加了一个事件监听器来监听滚动事件，并调用updateActiveAnchor方法来更新当前活动的锚点。在beforeDestroy钩子中，我们移除了这个事件监听器。

scrollToAnchor方法接收一个索引，并滚动到对应的锚点。updateActiveAnchor方法遍历所有锚点，并根据当前窗口的滚动位置来设置activeAnchor的值。

原文地址：https://blog.csdn.net/heiye_007/article/details/140497230

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！