scroll 元素滚动到指定位置(包含app和网页）

使用VueScrollTo实现网页平滑滚动效果

VueScrollTo是一个基于Vue的平滑滚动插件，实现网页中元素点击后平滑滚动到目标位置的效果。在很多情况下，我们需要在网页中使用锚点链接，但是默认的锚点跳转方式可能会出现跳动或者瞬间跳转的情况，使用VueScrollTo可以避免这些问题。接下来将从以下几个方面详细介绍VueScrollTo的使用方法。

一、安装VueScrollTo

可以使用npm来安装VueScrollTo，命令如下：

npm install --save vue-scrollto

安装完成后，在Vue项目中使用VueScrollTo需要在main.js中导入组件：

import VueScrollTo from 'vue-scrollto'
Vue.use(VueScrollTo)

二、VueScrollTo的基本用法

安装完成后，我们就可以开始使用VueScrollTo实现平滑滚动效果。VueScrollTo有两种用法:全局组件和局部组件。 全局组件在任何组件中都可以使用，定义方式如下：

其中，offset是指滚动目标位置在窗口顶部的偏移量，duration是指滚动的持续时间。 局部组件仅在定义的组件中可以使用，定义方式如下：

import {VueScrollTo, Vuelidate} from 'vue-scrollto'

export default {

  components: {

    VueScrollTo

  },

  methods: { 

    scrollToTop () { 

      this.$refs.foo.scrollTo('#top')

    }

  }

} 

在template中使用局部组件: