hpufe / vue-scroll-behavior

Completely customize the scroll behavior on route navigation

vue-scroll-behavior

Completely customize the scroll behavior on route navigation

IE / Edge	Firefox	Chrome	Safari	Opera	iOS	Android
IE9+, Edge	✓	✓	✓	✓	✓	✓

Table of content

• Demo
• Installation
• Description
• Example
• Options
• ChangeLog
• Contribute

Demo

You can check vue-scroll-behavior demo at https://jeneser.github.io/douban

Installation

NPM

npm install vue-scroll-behavior --save

import vueScrollBehavior from 'vue-scroll-behavior'

Vue.use(vueScrollBehavior)
Vue.vueScrollBehavior(router)

Direct include

If you are using Vue globally, just include vue-scroll-behavior.js and it will automatically install it.

<script src="path/to/vue-scroll-behavior.js"></script>

Description

When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. vue-router allows you to achieve these and even better. But, vue-router scroll behavior feature only works in HTML5 history mode...

vue-scroll-behavior allows you to completely customize the scroll behavior in HTML5 history mode and hash mode.

Features

• Simplicity - only need to call Vue.vueScrollBehavior(router)
• Compatibility - Working in HTML5 history mode and hash mode

Example

For additional examples and detailed description check the demo. https://jeneser.github.io/douban

Options

developing...

ChangeLog

Contribute

Please make sure to read the Contributing Guide before making a pull request.

License

MIT Copyright (c) 2017 Jeneser