vue实现滚动条到顶部或者到指定位置

要实现滚动条到顶部或者到指定位置，可以使用Vue.js提供的ref属性和$refs对象来操作DOM元素，通过监听事件来获取元素滚动位置，从而控制元素的滚动。

以下是实现滚动条到顶部的示例：

将滚动条滚动到顶部

1. 在template中添加一个容器元素和一个点击按钮

<template>
  <div>
    <div ref="scrollContainer" style="height: 200px; overflow: auto;">
      <!-- 这里是滚动内容 -->
    </div>
    <button @click="scrollTop">回到顶部</button>
  </div>
</template>

1. 在methods中添加一个scrollTop方法，通过$refs获取容器元素，将容器元素的scrollTop属性设置为0即可

export default {
  methods: {
    scrollTop() {
      this.$refs.scrollContainer.scrollTop = 0;
    },
  },
};

以上就是使用Vue.js实现滚动条回到顶部的方法。

将滚动条指定位置

1. 在template中添加一个容器元素、指定位置元素和一个点击按钮

<template>
  <div>
    <div ref="scrollContainer" style="height: 200px; overflow: auto;">
      <!-- 这里是滚动内容 -->
      <div ref="fixedElement">指定位置元素</div>
    </div>
    <button @click="scrollToFixed">滚动到指定位置</button>
  </div>
</template>

1. 在methods中添加一个scrollToFixed方法，通过$refs获取容器元素和指定位置元素，计算指定位置元素相对容器元素的位置，将容器元素的scrollTop属性设置为该值即可

export default {
  methods: {
    scrollToFixed() {
      const container = this.$refs.scrollContainer;
      const fixedElement = this.$refs.fixedElement;

      const containerOffsetTop = container.offsetTop;
      const scrollTop = fixedElement.offsetTop - containerOffsetTop;

      container.scrollTop = scrollTop;
    },
  },
};

以上就是使用Vue.js实现滚动条滚动到指定位置的方法。需要注意的是，当指定位置元素在容器元素外部时，需要根据实际情况进行计算。