vue滚动到指定位置,有滚动效果

Vue可以通过`window.scrollTo`方法来滚动到页面的指定位置，并且可以通过CSS的`transition`属性来实现滚动效果。

首先，在事件触发时调用`window.scrollTo`方法，传入需要滚动到的位置。例如：

scrollToPosition() {
  window.scrollTo({
    top: 500,  // 需要滚动到的位置
    behavior: 'smooth'  // 滚动效果，设置为'smooth'表示有滚动效果
  });
}

接着，在模板中绑定一个按钮或者其他触发事件，调用`scrollToPosition`方法：

<template>
  <div>
    <button @click="scrollToPosition">滚动到指定位置</button>
  </div>
</template>

这样，当按钮被点击时，页面会平滑地滚动到指定位置500。

为了实现滚动效果，还需要为滚动的元素添加CSS样式。在需要滚动的元素的样式中，添加`transition`属性来控制滚动效果的持续时间和缓冲函数。例如：

.scrollable-element {
  transition: top 0.5s ease-in-out;  // 控制滚动效果的持续时间和缓冲函数
}

然后，在滚动到指定位置的方法中，使用Vue的`ref`属性来获取需要滚动的元素，并通过改变其`scrollTop`来触发滚动效果，例如：

scrollToPosition() {
  const element = this.$refs.scrollableElement;
  element.scrollTo({
    top: 500,
    behavior: 'smooth'
  });
}

最后，在模板中使用`ref`属性为需要滚动的元素指定一个引用名称：

<template>
  <div>
    <div ref="scrollableElement" class="scrollable-element">需要滚动的内容</div>
    <button @click="scrollToPosition">滚动到指定位置</button>
  </div>
</template>

这样，当按钮被点击时，`scrollable-element`元素会平滑地滚动到指定位置500，并且具有滚动效果。