├── LICENSE ├── README.md ├── bower.json ├── package.json ├── smooth-scroll.js └── smooth-scroll.min.js /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2013 Gabriel Delépine 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | 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, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Smooth-Scroll 2 | ============= 3 | 4 | Adds smooth scrolling to anchor links within a page without any framework dependency. 5 | 6 | Demo 7 | === 8 | http://gabrieldelepine.github.io/smooth-scroll/ 9 | 10 | Dependencies 11 | === 12 | None ! Smooth scroll is a framework-free standalone function (ie : You do not need to include any other file in your page such as jQuery) 13 | 14 | How To Use 15 | === 16 | Include the `smooth-scroll.js` file to your web page. All anchor links will scroll smoothly. 17 | 18 | If your layout includes a `position: fixed` header, your anchors will be hidden behind your header. 19 | To fix-it, change the `height_fixed_header` parameter within `smooth-scroll.js` to `1`. 20 | 21 | Bower 22 | === 23 | If you are using bower, just run `bower install smooth-scroll` 24 | 25 | Npm 26 | === 27 | Just run `npm install @gabriel-delepine/smooth-scroll` 28 | 29 | Compatibility 30 | === 31 | Smooth scroll is compatible with modern browsers only because it use the [history API](http://caniuse.com/history). 32 | For older browsers, it might be possible to get compatibility with https://github.com/browserstate/history.js 33 | 34 | Size 35 | === 36 | 37 | The size of the minified version is 432 bytes ! (After gzip) 38 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "smooth-scroll", 3 | "homepage": "https://github.com/GabrielDelepine/smooth-scroll", 4 | "version": "1.4.0", 5 | "repository": { 6 | "type": "git", 7 | "url": "git://github.com/GabrielDelepine/smooth-scroll.git" 8 | }, 9 | "main": ["./smooth-scroll.js"], 10 | "ignore": [ 11 | "*.min.js" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@gabriel-delepine/smooth-scroll", 3 | "version": "1.4.0", 4 | "description": "smooth scrolling anchors page without framework dependency", 5 | "main": "smooth-scroll.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/GabrielDelepine/smooth-scroll.git" 12 | }, 13 | "author": "Gabriel Delépine", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/GabrielDelepine/smooth-scroll/issues" 17 | }, 18 | "homepage": "https://github.com/GabrielDelepine/smooth-scroll#readme" 19 | } 20 | -------------------------------------------------------------------------------- /smooth-scroll.js: -------------------------------------------------------------------------------- 1 | /* 2 | * - autoSmoothScroll - 3 | * Licence MIT 4 | * Written by Gabriel Delépine 5 | * Current version 1.3.1 (2014-10-22) 6 | * Previous version 1.3.0 (2014-07-23) 7 | * Previous version 1.2.0 (2014-02-13) 8 | * Previous version 1.0.1 (2013-11-08) 9 | * Previous version 1.0.0 (2013-10-27) 10 | * Requirement : None, it is a framework-free function (i.e. you do not need to include any other file in your page such as jQuery) 11 | * Fork-me on github : https://github.com/Yappli/smooth-scroll 12 | * */ 13 | (function(window, undefined) // Code in a function to create an isolate scope 14 | { 15 | 'use strict'; 16 | var height_fixed_header = 0, // For layout with header with position:fixed. Write here the height of your header for your anchor don't be hiden behind 17 | speed = 500, 18 | moving_frequency = 15, // Affects performance ! High number makes scroll more smooth 19 | links = document.getElementsByTagName('a'), 20 | href; 21 | 22 | for(var i = 0; i < links.length; i++) 23 | { 24 | href = (links[i].attributes.href === undefined) ? null : links[i].attributes.href.nodeValue.toString(); 25 | if(href !== null && href.length > 1 && href.indexOf('#') != -1) // href.substr(0, 1) == '#' 26 | { 27 | links[i].onclick = function() 28 | { 29 | var element, 30 | href = this.attributes.href.nodeValue.toString(), 31 | url = href.substr(0, href.indexOf('#')), 32 | id = href.substr(href.indexOf('#') + 1); 33 | if (element = document.getElementById(id)) 34 | { 35 | 36 | var hop_count = (speed - (speed % moving_frequency)) / moving_frequency, // Always make an integer 37 | getScrollTopDocumentAtBegin = getScrollTopDocument(), 38 | gap = (getScrollTopElement(element) - getScrollTopDocumentAtBegin) / hop_count; 39 | 40 | if (window.history && typeof window.history.pushState == 'function') 41 | window.history.pushState({}, undefined, url + '#' + id); // Change URL for modern browser 42 | 43 | for (var i = 1; i <= hop_count; i++) 44 | { 45 | (function() 46 | { 47 | var hop_top_position = gap * i; 48 | setTimeout(function(){ window.scrollTo(0, hop_top_position + getScrollTopDocumentAtBegin); }, moving_frequency * i); 49 | })(); 50 | } 51 | 52 | return false; 53 | } 54 | }; 55 | } 56 | } 57 | 58 | var getScrollTopElement = function(e) 59 | { 60 | var top = height_fixed_header * -1; 61 | 62 | while (e.offsetParent != undefined && e.offsetParent != null) 63 | { 64 | top += e.offsetTop + (e.clientTop != null ? e.clientTop : 0); 65 | e = e.offsetParent; 66 | } 67 | 68 | return top; 69 | }; 70 | 71 | var getScrollTopDocument = function() 72 | { 73 | return window.pageYOffset !== undefined ? window.pageYOffset : document.documentElement.scrollTop !== undefined ? document.documentElement.scrollTop : document.body.scrollTop; 74 | }; 75 | })(window); 76 | -------------------------------------------------------------------------------- /smooth-scroll.min.js: -------------------------------------------------------------------------------- 1 | /* smooth-scroll.js v1.3.1 */ 2 | (function(e,t){"use strict";var n=0,r=500,i=15,s=document.getElementsByTagName("a"),o;for(var u=0;u1&&o.indexOf("#")!=-1){s[u].onclick=function(){var n,s=this.attributes.href.nodeValue.toString(),o=s.substr(0,s.indexOf("#")),u=s.substr(s.indexOf("#")+1);if(n=document.getElementById(u)){var l=(r-r%i)/i,c=f(),h=(a(n)-c)/l;if(e.history&&typeof e.history.pushState=="function")e.history.pushState({},t,o+"#"+u);for(var p=1;p<=l;p++){(function(){var t=h*p;setTimeout(function(){e.scrollTo(0,t+c)},i*p)})()}return false}}}}var a=function(e){var r=n*-1;while(e.offsetParent!=t&&e.offsetParent!=null){r+=e.offsetTop+(e.clientTop!=null?e.clientTop:0);e=e.offsetParent}return r};var f=function(){return e.pageYOffset!==t?e.pageYOffset:document.documentElement.scrollTop!==t?document.documentElement.scrollTop:document.body.scrollTop}})(window) 3 | --------------------------------------------------------------------------------