Completely customize the scroll behavior on route navigation
 IE / Edge |
 Firefox |
 Chrome |
 Safari |
 Opera |
 iOS |
 Android |
|---|---|---|---|---|---|---|
| IE9+, Edge | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
You can check vue-scroll-behavior demos at:
Douban: https://jeneser.github.io/douban
Simple: https://jeneser.github.io/vue-scroll-behavior
npm install vue-scroll-behavior --saveimport vueScrollBehavior from 'vue-scroll-behavior'
Vue.use(vueScrollBehavior)
Vue.vueScrollBehavior(router)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>CDN
<script src="https://unpkg.com/vue-scroll-behavior@0.1.4/dist/vue-scroll-behavior.js"></script>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.
- Simplicity - only need to call
Vue.vueScrollBehavior(router) - Compatibility - Working in HTML5 history mode and hash mode
For additional examples and detailed description check the demo. https://jeneser.github.io/douban You can clone this repository. then
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run devdeveloping...
- June 4, 2017:
- Fix some bug, Perform browser testing
- Publish @0.1.2
- June 5, 2017:
- Publish @0.1.3
- Publish @0.1.4
Please make sure to read the Contributing Guide before making a pull request.
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build library and demo for production
npm run buildMIT Copyright (c) 2017 Jeneser