vue点击文字，网站滚动到固定位置，代码实现

在Vue.js中，你可以通过JavaScript或者利用Vue的`@click`事件监听器配合Vue的`nextTick`函数以及`scrollTo`方法来实现点击文字滚动到指定位置的功能。以下是一个简单的代码示例：

<template>
  <div id="app">
    <button @click="scrollToPosition">点击滚动</button>
    <p v-for="(item, index) in items" :key="index">{{ item }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['这是第一行', '这是第二行', '这是第三行', ...], // 需要滚动的目标元素内容
      scrollTargetOffset: { top: 50 } // 滚动到的位置，这里假设是距离顶部50像素
    };
  },
  methods: {
    scrollToPosition() {
      this.$nextTick(() => {
        const targetElement = document.querySelector('div p'); // 确定需要滚动到的具体元素
        window.scrollTo({
          top: targetElement.offsetTop + this.scrollTargetOffset.top,
          behavior: 'smooth' // 设置平滑滚动效果
        });
      });
    }
  }
};
</script>

<style scoped>
#app {
  height: 400px; // 示例中应用了固定的滚动高度
}
</style>

在这个例子中，当用户点击按钮时，会触发`scrollToPosition`方法。首先等待DOM更新完成（$nextTick），然后获取目标元素并计算其相对于视口的顶部偏移，加上预设的滚动位置，最后使用`window.scrollTo`滚动到那个位置。