├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── index.js
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | npm-debug.log
3 | 
4 | .editorconfig
5 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2016 KevinHoughton
 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 | [![NPM](https://nodei.co/npm/vue-scroll-to.png?downloads=true)](https://www.npmjs.com/package/vue-scroll-to)
 2 | 
 3 | # vue-scroll-to
 4 | 
 5 | [Vue.js](https://github.com/vuejs/vue) directive that listens for click 
 6 | events and scrolls to elements.
 7 | 
 8 | ## Install
 9 | 
10 | With [npm](http://npmjs.org) do:
11 | 
12 | ```bash
13 | $ npm install vue-scroll-to --save
14 | ```
15 | or
16 | ```bash
17 | $ yarn add vue-scroll-to
18 | ```
19 | 
20 | ## Usage
21 | 
22 | Please note that it's necessary to use single quotes within the double quotes
23 | of the directive when defining the class and padding.
24 | 
25 | ```js
26 | import Vue from 'vue';
27 | import vueScrollTo from 'vue-scroll-to';
28 | 
29 | Vue.use(vueScrollTo, options);
30 | ```
31 | 
32 | ```html
33 | <a href="#" v-scroll-to="'.element, 50px'">Scroll to .element</a>
34 | 
35 | <div class="element">
36 |     Hi. I'm element.
37 | </div>
38 | ```
39 | 
40 | ## Variables in directive
41 | 
42 | ```html
43 | v-scroll-to="'<element>, <padding-in-px>'"
44 | ```
45 | 
46 | Default:
47 | 
48 | * `padding-in-px`: 0
49 | 
50 | ## Settings
51 | 
52 | Default `options`:
53 | 
54 | * `speed` = 500 - Animation speed.
55 | * `padding` = 0 - You can set default global padding, which will override 
56 |     when put `padding-in-px` value inline with `v-scroll-to`.
57 | * `movingFrequency` = 15 = Number of steps of animation.
58 | 
59 | ## License
60 | 
61 | MIT
62 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | var _ = {
  4 |     $: function (selector) {
  5 |         return document.querySelector(selector);
  6 |     },
  7 |     on: function ($element, events, handler) {
  8 |         if (!(events instanceof Array)) {
  9 |             events = [events];
 10 |         }
 11 |         for (var i = 0; i < events.length; i++) {
 12 |             $element.addEventListener(events[i], handler);
 13 |         }
 14 |     },
 15 |     off: function ($element, events, handler) {
 16 |         if (!(events instanceof Array)) {
 17 |             events = [events];
 18 |         }
 19 |         for (var i = 0; i < events.length; i++) {
 20 |             $element.removeEventListener(events[i], handler);
 21 |         }
 22 |     }
 23 | };
 24 | 
 25 | function getScrollTopElement($element) {
 26 |     var top = 0;
 27 | 
 28 |     while ($element.offsetParent !== undefined && $element.offsetParent != null) {
 29 |         top += $element.offsetTop + ($element.clientTop != null ? $element.clientTop : 0);
 30 |         $element = $element.offsetParent;
 31 |     }
 32 | 
 33 |     return top;
 34 | }
 35 | 
 36 | function getScrollTopDocument() {
 37 |     return document.documentElement.scrollTop + document.body.scrollTop;
 38 | }
 39 | 
 40 | var ScrollTo = {
 41 |     install: function(Vue, config) {
 42 |         var settings = {
 43 |             speed: 500,
 44 |             padding: 0,
 45 |             movingFrequency: 15
 46 |         };
 47 | 
 48 |         Object.assign(settings, config);
 49 | 
 50 |         function handleClick() {
 51 |             var options = this.expression.split(', ');
 52 | 
 53 |             options = options.map(function (item) {
 54 |                 if (typeof item !== 'string') {
 55 |                     return item;
 56 |                 }
 57 |                 return item.replace(/\'/g, '');
 58 |             });
 59 | 
 60 |             var selector = options[0];
 61 |             var padding = (typeof options[1] === 'string')
 62 |                 ? options[1].replace(/\D/g, '')
 63 |                 : settings.padding;
 64 | 
 65 |             var $element = _.$(selector);
 66 | 
 67 |             if (!$element) {
 68 |                 throw new Error('$element is not defined, selector="' + selector + '" ');
 69 |             }
 70 | 
 71 |             var hopCount = Math.ceil(settings.speed / settings.movingFrequency);
 72 |             var documentScrollTop = getScrollTopDocument();
 73 |             var gap = (getScrollTopElement($element) - documentScrollTop - padding) / hopCount;
 74 | 
 75 |             if (gap === 0) {
 76 |                 // Do not scroll when current position is the same as target offset.
 77 |                 return;
 78 |             }
 79 | 
 80 |             for (var i = 1; i <= hopCount; i++) {
 81 |                 (function (i) {
 82 |                     var hopTopPosition = gap * i;
 83 | 
 84 |                     setTimeout(function () {
 85 |                         window.scrollTo(0, hopTopPosition + documentScrollTop);
 86 |                     }, settings.movingFrequency * i);
 87 |                 })(i);
 88 |             }
 89 |         }
 90 | 
 91 |         Vue.directive('scroll-to', {
 92 |             bind: function ($element, context) {
 93 |                 _.on($element, 'click', handleClick.bind(context));
 94 |             },
 95 | 
 96 |             unbind: function ($element) {
 97 |                 _.off($element, 'click', handleClick);
 98 |             }
 99 |         });
100 |     }
101 | };
102 | 
103 | export default ScrollTo;
104 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-scroll-to",
 3 |   "version": "2.2.1",
 4 |   "description": "Adds a directive that listens for click events and scrolls to elements.",
 5 |   "main": "index.js",
 6 |   "keywords": [
 7 |     "vue",
 8 |     "vuejs",
 9 |     "directive",
10 |     "scroll",
11 |     "scrollto",
12 |     "scroll-to",
13 |     "scroll to"
14 |   ],
15 |   "license": "MIT",
16 |   "author": {
17 |     "name": "Kevin Houghton",
18 |     "email": "info@kevinhoughton.nl",
19 |     "twitter": "https://twitter.com/kevinhoughtonnn"
20 |   },
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "https://github.com/KevinHoughton/vue-scroll-to"
24 |   },
25 |   "dependencies": {}
26 | }
27 | 


--------------------------------------------------------------------------------