Vue项目通过scrollIntoView实现锚点点击页面平滑滚动

在Vue项目中，我们可以通过scrollIntoView方法实现锚点点击页面平滑滚动。

首先，在需要滚动的元素上绑定一个ref属性：

<div ref="scrollElem">需要滚动的元素</div>

然后，在对应的锚点上绑定一个点击事件，触发滚动操作：

<a @click="scrollToElem">锚点</a>

在Vue组件中，定义scrollToElem方法，通过ref获取需要滚动的元素，并调用scrollIntoView方法实现平滑滚动：

methods: {
  scrollToElem() {
    this.$refs.scrollElem.scrollIntoView({
      behavior: 'smooth', // 平滑滚动
      block: 'start' // 滚动到元素顶部
    })
  }
}

这样，当点击锚点时，页面就会平滑滚动到对应的元素位置。

相关问题

Vue3+ts 跳转页面 定位到某个位置 scrollIntoView 锚点滚动

可以通过以下方式在 Vue3 中实现跳转页面并定位到某个位置的滚动效果：

1. 在目标位置添加一个具有唯一标识的元素（例如 `<div id="target"></div>`），作为锚点。

2. 在跳转页面的组件中，引入 `ref` 和 `onMounted`，并使用 `scrollIntoView` 方法实现滚动：

<template>
  <div ref="target" id="target">目标位置</div>
  <button @click="scrollToTarget">跳转到目标位置</button>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'

export default defineComponent({
  setup() {
    const targetRef = ref(null)

    const scrollToTarget = () => {
      targetRef.value?.scrollIntoView({ behavior: 'smooth' })
    }

    onMounted(() => {
      if (location.hash === '#target') {
        scrollToTarget()
      }
    })

    return {
      targetRef,
      scrollToTarget,
    }
  },
})
</script>

在 `onMounted` 钩子函数中判断当前页面是否包含 `#target` 锚点，如果有则执行 `scrollToTarget` 方法，实现自动滚动到目标位置的效果。

vue实现点击菜单滚动内容锚点

可以通过以下几个步骤实现：

1. 在菜单中添加点击事件，获取对应的锚点id。
2. 使用`ref`属性获取到内容容器的元素。
3. 在内容容器上绑定`scroll`事件，监听滚动位置。
4. 根据当前滚动位置，判断哪个锚点处于可视范围内，并高亮对应的菜单项。

具体代码如下：

菜单部分：

<template>
  <div>
    <ul>
      <li v-for="item in menu" :key="item.id" @click="scrollToAnchor(item.id)" :class="{active: activeAnchor === item.id}">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        { id: 'a1', title: '锚点1' },
        { id: 'a2', title: '锚点2' },
        { id: 'a3', title: '锚点3' }
      ],
      activeAnchor: '' // 当前激活的锚点id
    }
  },
  methods: {
    scrollToAnchor(anchorId) {
      // 获取对应的锚点元素
      const anchorElement = document.getElementById(anchorId);
      if (anchorElement) {
        // 滚动到锚点位置
        anchorElement.scrollIntoView({ behavior: 'smooth' });
        // 设置当前激活的锚点id
        this.activeAnchor = anchorId;
      }
    }
  }
}
</script>

内容部分：

<template>
  <div ref="content" @scroll="onScroll">
    <div id="a1">锚点1内容</div>
    <div id="a2">锚点2内容</div>
    <<div id="a3">锚点3内容</div>
  </div>
</template>

<script>
export default {
  methods: {
    onScroll() {
      // 获取内容容器的高度和滚动位置
      const contentHeight = this.$refs.content.offsetHeight;
      const scrollTop = this.$refs.content.scrollTop;

      // 遍历所有锚点，判断哪个处于可视范围内
      for (let i = 0; i < this.menu.length; i++) {
        const anchorId = this.menu[i].id;
        const anchorElement = document.getElementById(anchorId);
        if (anchorElement) {
          const anchorTop = anchorElement.offsetTop;
          const anchorBottom = anchorTop + anchorElement.offsetHeight;
          if (scrollTop >= anchorTop && scrollTop < anchorBottom) {
            // 设置当前激活的锚点id
            this.$emit('active-anchor', anchorId);
            break;
          }
        }
      }
    }
  }
}
</script>