22 | All internal links would scroll Smoothly.
23 |
24 | Usage :
25 |
26 | Include the js file
27 |
28 | <script type="text/javascript" src="smoothScroll.js"></script>
29 |
30 |
31 | Add this script after the body load. Ideally one may add this just before the closing of body tag.
32 |
33 | <script type="text/javascript">
34 | smooth_scroll.init();
35 | </script>
36 |
37 |
38 | If there is a fixed header, pass the id of fixed header as config.
39 |
40 | <script type="text/javascript">
41 | smooth_scroll.init({
42 | header_id : "page-header"
43 | });
44 | </script>
45 |
46 |
47 |
48 |
49 | If there are links that should be ignored. Pass an array to ignore those links. Example
50 |
51 | <script type="text/javascript">
52 | smooth_scroll.init({
53 | header_id : "page-header",
54 | ignore_links: ["page-header"]
55 | });
56 | </script>
57 |
58 |
59 |
60 |
61 | Without Smooth Scroll
62 | 
63 |
64 | With Smooth Scroll
65 | 
66 |
67 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
--------------------------------------------------------------------------------
/params.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Smoothscrolljs",
3 | "tagline": "Smooth Scroll for all internal links. ",
4 | "body": "All internal links would scroll Smoothly.\r\n\r\nUsage : \r\n\r\nInclude the js file\r\n```\r\n\r\n```\r\n\r\nAdd this script after the body load. Ideally one may add this just before the closing of body tag.\r\n\r\n``` \r\n\r\n```\r\n\r\nIf there is a fixed header, pass the id of fixed header as config.\r\n\r\n```\r\n\r\n\r\n\r\n```\r\n\r\nIf there are links that should be ignored. Pass an array to ignore those links. Example\r\n\r\n```\r\n\r\n\r\n\r\n```\r\n\r\nWithout Smooth Scroll\r\n![alt text](https://raw.githubusercontent.com/CodingNinjasCodes/SmoothScrollJs/master/without_smooth_scroll.gif \"Without Smooth Scroll\")\r\n\r\nWith Smooth Scroll\r\n![alt text](https://raw.githubusercontent.com/CodingNinjasCodes/SmoothScrollJs/master/with_smooth_scroll.gif \"With Smooth Scroll\")\r\n\r\n\r\n",
5 | "note": "Don't delete this file! It's used internally to help with page regeneration."
6 | }
--------------------------------------------------------------------------------
/smoothScroll.js:
--------------------------------------------------------------------------------
1 | var smooth_scroll = (function() {
2 |
3 | var intervalId;
4 | var header_height;
5 | var delta;
6 | var destinationY;
7 | var currentY;
8 | var ignore_links;
9 |
10 | var isInArray = function(value, array) {
11 | return array.indexOf(value) > -1;
12 | }
13 |
14 | var smoothScroll = function() {
15 | if (delta > 0 && currentY + delta > destinationY) {
16 | delta = destinationY - currentY;
17 | clearInterval(intervalId);
18 | }
19 |
20 | if (delta < 0 && currentY + delta < destinationY) {
21 | delta = destinationY - currentY;
22 | clearInterval(intervalId);
23 | }
24 |
25 | window.scrollBy(0, delta);
26 | currentY = currentY + delta;
27 | delta = delta * 1.1;
28 | };
29 |
30 | var scrollTo = function(el) {
31 | if (intervalId !== undefined || intervalId !== null) {
32 | clearInterval(intervalId);
33 | }
34 |
35 | destinationY = el.offsetTop - header_height;
36 | currentY = window.scrollY;
37 |
38 | intervalId = setInterval(smoothScroll.bind(el), 10);
39 | delta = 1;
40 | if (currentY > destinationY) {
41 | delta = delta * -1;
42 | }
43 | };
44 |
45 |
46 | var onClickAnchor = function(e) {
47 | e.preventDefault();
48 | var anchor_tag = this;
49 | anchor_href = this.getAttribute("href")
50 | element_id = anchor_href.slice(1, anchor_href.length);
51 | var el = document.getElementById(element_id);
52 | scrollTo(el);
53 |
54 | };
55 |
56 | var init = function(config) {
57 | //Get all internal links
58 |
59 | if (config !== undefined && config !== null) {
60 | if (config.header_id !== undefined && config.header_id !== null) {
61 | header_height = document.getElementById(config.header_id).getBoundingClientRect().height;
62 | }
63 |
64 | ignore_links = config.ignore_links || []
65 | }
66 |
67 | var internal_links = document.querySelectorAll("a[href^='#']");
68 | for (var i = 0; i < internal_links.length; i++) {
69 | link = internal_links[i];
70 | var href = link.getAttribute("href");
71 | if (href !== "#" && !isInArray(href.slice(1, href.length), ignore_links)) {
72 | link.addEventListener("click", onClickAnchor.bind(link));
73 | }
74 | }
75 |
76 | header_height = header_height || 0;
77 | };
78 |
79 | return {
80 | init: init
81 | }
82 |
83 | })();
84 |
--------------------------------------------------------------------------------
/smoothScroll.min.js:
--------------------------------------------------------------------------------
1 | var smooth_scroll=function(){var a,b,c,d,e,f,g=function(a,b){return b.indexOf(a)>-1},h=function(){c>0&&e+c>d&&(c=d-e,clearInterval(a)),c<0&&e+c