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
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