Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue2-smooth-scroll

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue2-smooth-scroll

Simple vue smooth scroll

  • 1.6.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
5.9K
increased by3.39%
Maintainers
1
Weekly downloads
 
Created
Source

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!

Keywords

FAQs

Package last updated on 26 Feb 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc