vue-scroll-behavior allows you to customize the position of the scroll on route navigation. Especially hash mode to tell it the ways to process it, and it will do it automatically.
Features
- Simplicity – only need to call
Vue.vueScrollBehavior(router)
- Compatibility – Working in HTML5 history mode and hash mode
- Automatically – Automatically saves or restores the scroll position
- Customizable – Can manually save or restore the scroll position
Must Read: Try Scrolling on the Motion Blur Written in TypeScript Website
Customize The Scrolling Position On Route Navigation
Post Name | Vue JS Scroll Behavior |
Author Name | jeneser |
Category | Menu Plugins, Scrolling |
Official Page | Click Here | Click Here |
Official Website | github.com |
Publish Date | April 6, 2022 |
Last Update | August 3, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
Installation
npm install vue-scroll-behavior --save
import vueScrollBehavior from 'vue-scroll-behavior' Vue.use(vueScrollBehavior, { router: router })
If you are using Vue globally, just include vue-scroll-behavior.js and it will install it automatically.
<script src="path/to/vue-scroll-behavior.js"></script> <script> Vue.$vueScrollBehavior(router) </script>
Options
List of available Options:
Prop | Data Type | Default | Description |
---|---|---|---|
router | Object | The router instance: const router = new VueRouter({}) | |
el | String | null | CSS selector: #app |
ignore | Array | [ ] | RegExp list to ignore some routes, they will directly scroll to the top |
maxLength | Number | 50 | Saved history List max length |
delay | Number | 0 | Delay scroll by a number of milliseconds |
See Demo And Download

Official Website(jeneser): Click Here
This superior jQuery/javascript plugin is developed by jeneser. For extra advanced usage, please go to the official website.