Customize The Scrolling Position On Route Navigation Library

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