Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

vue2-smooth-scroll

1.4.2 • Public • Published

Vue2 Smooth Scroll

All Contributors

Vue 2.x npm npm-downloades license

Simple vue smooth scroll extended from vue-smooth-scroll

Features

  • fixed SSR
  • 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)

Directive usage

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

Programmatic usage

const exampleElement = this.$refs.exampleElement || this.$el || document.getElementById(...)
this.$smoothScroll({
  scrollTo: exampleElement,
  hash: '#exampleHash' // only required if updateHistory is true
  ... // optional overrides for global config
})

Custom options

Defaults

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

Example:

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

Without Browserify or Webpack

<body>
  <div id="app">
    <a href="#bottom" v-smooth-scroll>click me will scroll to bottom!</a>
    <div style="height: 2000px;"></div>
    <span id="bottom">bottom</span>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script> 
  <script src="https://unpkg.com/vue2-smooth-scroll"></script> 
  <script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script> 
</body>

License

MIT

Contributors ✨

Thanks goes to these wonderful people (emoji key):


James

💻

a-kriya

💻 🐛 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

Install

npm i vue2-smooth-scroll

DownloadsWeekly Downloads

4,082

Version

1.4.2

License

MIT

Unpacked Size

10.8 kB

Total Files

7

Last publish

Collaborators

  • avatar