vue-scrollto 的文档

Vue-ScrollTo是一个Vue.js插件，用于在页面中滚动到指定位置。它可以用于单页应用程序或多页应用程序，支持元素滚动和页面滚动。

## 安装

你可以通过npm或yarn来安装Vue-ScrollTo:

npm install --save vue-scrollto

或

yarn add vue-scrollto

## 使用

在您的Vue.js应用程序中，您需要先导入Vue-ScrollTo：

import VueScrollTo from 'vue-scrollto'

然后，您需要将Vue-ScrollTo添加为Vue.js插件：

Vue.use(VueScrollTo)

现在，您可以在组件内使用`v-scroll-to`指令来滚动到指定位置。例如：

<button v-scroll-to="'#element'">Scroll to #element</button>

您还可以将选项对象传递给指令以使用自定义设置：

<button v-scroll-to="{ el: '#element', duration: 500, easing: 'ease-in' }">Scroll to #element</button>

在这个例子中，我们指定了要滚动到的元素ID、动画持续时间和缓动函数。

您还可以在Vue.js组件中使用`this.$scrollTo`方法来编程方式滚动到指定位置：

this.$scrollTo('#element', 500, { easing: 'ease-in' })

在这个例子中，我们指定了要滚动到的元素ID、动画持续时间和缓动函数。

## 选项

Vue-ScrollTo支持以下选项：

- `el`：要滚动到的元素的选择器或DOM元素。默认为`null`，这意味着它将滚动到页面顶部。
- `duration`：动画持续时间（以毫秒为单位）。默认为`500`。
- `easing`：缓动函数。默认为`ease-out`。
- `offset`：滚动偏移量（以像素为单位）。默认为`0`。
- `cancelable`：是否可以取消滚动。默认为`true`。
- `onDone`：滚动完成后调用的回调函数。
- `onCancel`：当滚动被取消时调用的回调函数。

## 示例

以下是一些示例，演示如何在Vue.js应用程序中使用Vue-ScrollTo：

### 滚动到页面顶部

<button v-scroll-to>Scroll to top</button>

### 滚动到具有ID的元素

<button v-scroll-to="'#element'">Scroll to #element</button>

### 滚动到具有ID的元素，并带有自定义选项

<button v-scroll-to="{ el: '#element', duration: 1000, easing: 'ease-in' }">Scroll to #element</button>

### 在组件中编程方式滚动

this.$scrollTo('#element', 500, { easing: 'ease-in' })

## 结论

Vue-ScrollTo是一个非常有用的Vue.js插件，可以轻松地在应用程序中实现平滑滚动。它支持许多选项，可以自定义滚动体验。