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
Bash
// import on your project (less then 1KB gziped)
import vueSmoothScroll from 'vue2-smooth-scroll'
Vue.use(vueSmoothScroll)
JavaScript

Usage

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

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

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

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

GitHub

Yuliang-Lee/vue2-smooth-scroll

12117

:surfer:Simple vue smooth scroll — Read More

Latest commit to the master branch on 1-9-2023
Download as zip