vue-scroll-behavior

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 demos at:

Douban: https://jeneser.github.io/douban

Simple: https://jeneser.github.io/vue-scroll-behavior

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 You can clone this repository. then

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

Options

developing...

ChangeLog

• June 4, 2017:
  • Fix some bug, Perform browser testing
  • Publish @0.1.2
• June 5, 2017:
  • Publish @0.1.3

Contribute

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 build

License

MIT Copyright (c) 2017 Jeneser