Simple vue smooth scroll extended from vue-smooth-scroll

by Vue.js Examples

Vue2 Smooth Scroll

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)

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
    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>

GitHub