├── .gitignore ├── index.js ├── package.json ├── LICENSE ├── README.md ├── demo └── index.html ├── src └── smoothscroll.js ├── dist └── vue-smoothscroll.js └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var SmoothScroll = require("./src/smoothscroll") 2 | module.exports = { 3 | install: function (Vue, options) { 4 | options = options || {name: 'smoothscroll'}; 5 | Vue.directive(options.name, { 6 | inserted: function (el, binding) { 7 | SmoothScroll(el, binding.value["duration"], binding.value["callback"], binding.value["context"],binding.value['axis']) 8 | } 9 | }) 10 | Object.defineProperty(Vue.prototype, '$SmoothScroll', { 11 | get: function () { 12 | return SmoothScroll; 13 | } 14 | }); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-smoothscroll", 3 | "homepage": "http://www.hibuff.me", 4 | "version": "0.2.0", 5 | "description": "it's a vuejs version of smoothscroll", 6 | "author": "teddyzhu", 7 | "scripts": { 8 | "build": "webpack --config build/webpack.config.js" 9 | }, 10 | "dependencies": { 11 | "vue": "^1.0.21" 12 | }, 13 | "readme": "README.md", 14 | "main": "dist/vue-smoothscroll.js", 15 | "repository": { 16 | "type": "git", 17 | "url": "git@github.com:Teddy-Zhu/vue-smoothscroll.git" 18 | }, 19 | "license": "MIT", 20 | "devDependencies": { 21 | "babel-core": "^6.17.0", 22 | "babel-loader": "^6.2.5", 23 | "babel-preset-es2015": "^6.16.0", 24 | "css-loader": "^0.25.0", 25 | "style-loader": "^0.13.1", 26 | "vue": "^2.0.3", 27 | "webpack": "^1.13.2" 28 | }, 29 | "files": [ 30 | "dist", 31 | "index.js" 32 | ] 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License (MIT) 2 | 3 | Copyright (c) 2016 TeddyZhu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-smoothscroll 2 | 3 | > it's a vuejs version of smoothscroll Based on https://github.com/alicelieutier/smoothScroll/blob/master/smoothscroll.js 4 | 5 | ## How to Use 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install vue-smoothscroll 10 | ``` 11 | then in the js file , you can use with router or others 12 | ``` javascript 13 | var vueSmoothScroll = require('vue-smoothscroll'); 14 | Vue.use(vueSmoothScroll); 15 | 16 | ``` 17 | 18 | ```html 19 | //define a tag 20 |
21 | message 22 |
23 | ``` 24 | 25 | or 26 | 27 | ```javascript 28 | this.$SmoothScroll(target,duration,callback,context,axis); 29 | ``` 30 | params 31 | * `target` is a `HTMLElement Object` from your document that you want to scroll to, or a numeric position on the page 32 | * `duration` is the total duration of the scroll (optional, defaults to 500ms) 33 | * `callback` is a function to be executed when the scrolling is over (optional) 34 | * `context` is the scrolling context (optional, defaults to window, can be any `HTMLElement Object`) 35 | * `axis` is the x,y axis ,the value can be 'y' , 'x' , 'both', 'y' means horizontal direction, 'x' means vertical direction -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | vue-smoothscroll 7 | 8 | 9 | 10 | 11 | 12 |
13 |

14 | {{ message }} 15 |

16 |
17 | message 18 |
19 | 20 |
21 | 39 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /src/smoothscroll.js: -------------------------------------------------------------------------------- 1 | (function (root, smoothScroll) { 2 | 'use strict'; 3 | 4 | // Support RequireJS and CommonJS/NodeJS module formats. 5 | // Attach smoothScroll to the `window` when executed as a