vue2-smooth-scroll|一个易于使用和定制的Vue.js平滑滚动指令插件

vue2-smooth-scroll是一个易于使用和定制的Vue.js平滑滚动指令插件，用于实现页面平滑滚动效果。它支持在Vue.js 2.x中使用，并且易于安装和使用。

使用方法

安装

你可以通过npm来安装这个插件。在终端中输入以下命令：

npm install vue2-smooth-scroll
		

使用

然后在Vue应用程序中引入它：

import Vue from 'vue'
import VueSmoothScroll from 'vue2-smooth-scroll'

Vue.use(VueSmoothScroll)
		

接下来，在你的Vue组件中使用它：

<template>
  <div>
    <a href="#section1" v-smooth-scroll>跳转到第一部分</a>
    <a href="#section2" v-smooth-scroll="{duration: 1000}">跳转到第二部分</a>

    <div id="section1">
      ...
    </div>

    <div id="section2">
      ...
    </div>
  </div>
</template>
		

注意，在上面的代码中，我们在目标元素的href属性中使用了一个锚点链接，然后将v-smooth-scroll指令应用到链接元素上，这样在点击链接时就会触发平滑滚动效果。

第二个锚点设置了滚动时长为1000毫秒。

以编程的方式使用如下：

const myEl = this.$refs.myEl || this.$el || document.getElementById(...)

this.$smoothScroll({
  scrollTo: myEl,
  hash: '#sampleHash'  // required if updateHistory is true
})
		

配置参数

你可以使用以下选项来自定义平滑滚动效果：

• duration：滚动的时间（毫秒）。默认值是500。
• offset：滚动偏移量。默认值是0。
• easingFunction：滚动缓动函数。默认值是easeInOutCubic。
• container：滚动容器元素选择器。默认值是body。
• updateHistory：将hash推入浏览器的history。

你可以在Vue应用程序中使用以下代码来自定义这些选项：

Vue.use(VueSmoothScroll, {
  duration: 1000,
  offset: 100,
  easing: 'easeInOutQuart',
  container: '#scroll-container',
  updateHistory: false
})
			
		

github网址：https://github.com/Yuliang-Lee/vue2-smooth-scroll