vue-scrollto：非常好用的页面定位滚动插件

兼容性

支持vue3的版本是v2.19.0 及以上版本。

截止到2021年5月7日，npm安装后的版本是v2.20.0 可以支持vue2和vue3。

本例以2.20.0版本为例。最新版本请见：https://github.com/rigor789/vue-scrollto

安装插件（适用于vue2/3）

使用script在页面中引用

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script>

使用npm安装

npm install --save vue-scrollto

在Vue2版本中的使用

在main.js中：

import Vue from 'vue';
import App from './App.vue';
import VueScrollTo from 'vue-scrollto';

let scrollOptions = {
  container: "body", //滚动的容器
  duration: 500, //滚动时间
  easing: "ease", //缓动类型
  offset: -50, // 滚动时应应用的偏移量。此选项接受回调函数
  force: true, // 是否应执行滚动
  cancelable: true, // 用户是否可以取消滚动
  onStart: false, // 滚动开始时的钩子函数
  onDone: false, // 滚动结束时候的钩子函数
  onCancel: false, // 用户取消滚动的钩子函数
  x: false, // 是否要在x轴上也滚动
  y: true    // 是否要在y轴上滚动
};

Vue.use(VueScrollTo, scrollOptions);

使用<a>标签进行滚动跳转

<a href="#" v-scroll-to="'#element'">滚动到指定id的元素</a>

<div id="element">
    滚动到这个元素
</div>

当然也可以在这个标签中对滚动到的元素进行单独配置：

<a href="#" v-scroll-to="{
     el: '#element',
     container: '#container',
     duration: 500,
     lazy: false
     easing: 'linear',
     offset: -200,
     force: true,
     cancelable: true,
     onStart: onStart,
     onDone: onDone,
     onCancel: onCancel,
     x: false,
     y: true
 }">
    Scroll to #element
</a>

对元素添加@click事件滚动

当在main.js中注册了vue-scroll，就可以在程序任何地方使用this.$scrollto(..)进行跳转。

<div @click="goto">..</div>
goto() {
   this.$scrollTo(element, duration, options)
}
element : 可以是'#元素的id' 或者是一个DOM元素 document.getElementById('元素的id')，不可省略;
duration: 滚动执行时间,单位ms，可以省略
options：单独的配置信息可省略，如
this.$scrollTo('#top', 500, { offset: -100 // 滚动位置向上偏移100 })

或者在页面中引入，如：

var VueScrollTo = require('vue-scrollto');
var cancelScroll = VueScrollTo.scrollTo(element, duration, options);
cancelScroll();
或者直接：VueScrollTo.scrollTo(element, duration, options);

同时滚动

import { scroller } from 'vue-scrollto/src/scrollTo'
const firstScrollTo = scroller();
const secondScrollTo = scroller();
firstScrollTo('#el1')
secondScrollTo('#el2')

使用时遇到的问题

当元素被隐藏时，滚动会出现错误，会滚动到页面的顶部，所以在滚动到指定位置时，一定要保证元素是可见的！

如果直接在html中引入，那么其会自动使用Vue.use以及注册，但是切记，元素要包含在#app之中！否则无效！如下：

<div id="app">
  <a href="#" v-scroll-to="'#要滚动到的元素id'">...</a>
</div> 

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script>

附件下载

相关资料