https://github.com/Teddy-Zhu/vue-smoothscroll

a vue version smoothscroll for website
https://github.com/Teddy-Zhu/vue-smoothscroll

Last synced: 13 days ago
JSON representation

a vue version smoothscroll for website

• Host: GitHub
• URL: https://github.com/Teddy-Zhu/vue-smoothscroll
• Owner: Teddy-Zhu
• License: mit
• Archived: true
• Created: 2016-05-13T06:10:11.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-07-09T00:36:14.000Z (over 6 years ago)
• Last Synced: 2024-09-21T08:58:23.851Z (about 2 months ago)
• Language: JavaScript
• Size: 510 KB
• Stars: 60
• Watchers: 2
• Forks: 14
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-cn - vue-smoothscroll - Zhu](https://github.com/Teddy-Zhu) (Awesome Vue.js [](https://github.com/sindresorhus/awesome) / Libraries & Plugins)
• awesome-vue - vue-smoothscroll - Zhu/vue-smoothscroll?style=social) - smoothscroll的VueJS版本 (UI组件)
• awesome-github-vue - vue-smoothscroll - smoothscroll的VueJS版本 (UI组件)
• awesome-github-vue - vue-smoothscroll - smoothscroll的VueJS版本 (UI组件)
• awesome - vue-smoothscroll - smoothscroll的VueJS版本 (UI组件)

README

        
# vue-smoothscroll

> it's a vuejs version of smoothscroll Based on https://github.com/alicelieutier/smoothScroll/blob/master/smoothscroll.js

## How to Use

``` bash

# install dependencies

npm install vue-smoothscroll

```

then in the js file , you can use with router or others

``` javascript

var vueSmoothScroll = require('vue-smoothscroll');

Vue.use(vueSmoothScroll);

```

```html

   //define a tag

   


       message

   

```


or

```javascript

    this.$SmoothScroll(target,duration,callback,context，axis);

```

params

* `target` is a `HTMLElement Object` from your document that you want to scroll to, or a numeric position on the page

* `duration` is the total duration of the scroll (optional, defaults to 500ms)

* `callback` is a function to be executed when the scrolling is over (optional)

* `context` is the scrolling context (optional, defaults to window, can be any `HTMLElement Object`)

* `axis` is the x,y axis ,the value can be 'y' , 'x' , 'both', 'y' means horizontal direction, 'x' means vertical direction