Nullifying Precipitation Machine

    vue2-smooth-scroll
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.1 • Public • Published

    Vue2 Smooth Scroll

    All Contributors

    Vue 2.x npm npm-downloades license

    Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll.

    For simple use-cases, the native scroll-behavior CSS property (working draft) may be enough.

    This package compatible with Vue 2.x and Vue 1.x

    New package for Vue 3.x use this package v-smooth-scroll

    Features

    • Directive and programmatic API with global and local config overrides
    • SSR
    • Smooth, non-blocking animation using requestAnimationFrame (with fallback)
    • Y-axis or vertical scrolling
    • Specific scroll containers
    • 1.3kB gzipped, 2.9kB min

    Installation

    npm install --save vue2-smooth-scroll
    import VueSmoothScroll from 'vue2-smooth-scroll'
    Vue.use(VueSmoothScroll)

    Usage

    Directive

    <a href="#sec-3" v-smooth-scroll>Section 3</a>
    
    <section id="sec-3"></section>

    Programmatic

    const myEl = this.$refs.myEl || this.$el || document.getElementById(...)
    
    this.$smoothScroll({
      scrollTo: myEl,
      hash: '#sampleHash'  // required if updateHistory is true
    })

    Direct in <script>

    <body>
      <div id="app">
        <a href="#bottom" v-smooth-scroll>Let's go 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'
        })
      </script>
    </body>

    Custom options

    Defaults

    {
      duration: 500,       // animation duration in ms
      offset: 0,           // offset in px from scroll element, can be positive or negative
      container: '',       // selector string or Element for scroll container, default is window
      updateHistory: true  // whether to push hash to history
      easingFunction: null // gives the ability to provide a custom easing function `t => ...`
                           // (see https://gist.github.com/gre/1650294 for examples)
                           // if nothing is given, it will defaults to `easeInOutCubic`
    }

    Global

    import VueSmoothScroll from 'vue2-smooth-scroll'
    
    Vue.use(VueSmoothScroll, {
      duration: 400,
      updateHistory: false,
    })

    Directive:

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

    Programmatic

    this.$smoothScroll({
      scrollTo: this.$refs.myEl,
      duration: 1000,
      offset: -50,
    })

    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

    5,093

    Version

    1.5.1

    License

    MIT

    Unpacked Size

    13.2 kB

    Total Files

    7

    Last publish

    Collaborators

    • xlaoyu