/vue2-smooth-scroll

:surfer:Simple vue smooth scroll

Primary LanguageJavaScriptMIT LicenseMIT

Vue2 Smooth Scroll

Vue 2.x npm npm-downloades license

Simple vue smooth scroll extended from vue-smooth-scroll

Features

  • fixed duration problem, now animation work good.
  • support scroll down and scroll up
  • support specific scroll container
  • Optimize code

Instalation

# install dependency
npm install --save vue2-smooth-scroll
// import on your project (less then 1KB gziped)
import vueSmoothScroll from 'vue2-smooth-scroll'
Vue.use(vueSmoothScroll)

Usage

<a href="#div-id" v-smooth-scroll>Anchor</a>
<div id="div-id"></div>

Custom options

Defaults

  {
    duration: 500, // Animation speed
    offset: 0, // Offset from element, you can use positive or negative values
    cotainer: '', // the scroll container, default is window,use document.querySelector to query the Element
  }

Example:

<div id="container">
  <a href="#div-id" v-smooth-scroll="{ duration: 1000, offset: -50, container: '#container' }">Anchor</a>
  <div id="div-id"></div>
</div>

Without Browserify or Webpack

<body>
  <div id="app">
    <a href="#app" v-smooth-scroll>Anchor</a>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue2-smooth-scroll@1.0.0"></script>
  <script>
  Vue.use(VueSmoothScroll)
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>
</body>

License

MIT