smooth-scroll

commit

5f69dc05630e85f40f597b727d1b54dc81d4a46a

parent

74b0cb5125c2147fa5d956441aa77ef5e45d6fbe

Author

Tobias Bengfort <tobias.bengfort@gmx.net>

Date

2016-11-18 15:53

wrap in umd

Diffstat

2 files changed, 51 insertions, 33 deletions

diff --git a/TODO b/TODO

@@ -1,6 +1,4 @@
    1     1 -	fixed header support
    2    -1 -	packaging
    3    -1 -	use from javascript
    4     2 -	standards compliant
    5     3 -	change direction mid-scroll
    6     4 -	smooth scroll on history change (back button)

diff --git a/smooth-scroll.js b/smooth-scroll.js

@@ -1,41 +1,61 @@
    1    -1 var animate = function(apply, duration) {
    2    -1   var start = null;
    3    -1 
    4    -1   var step = function(timestamp) {
    5    -1     if (!start) start = timestamp;
    6    -1     var progress = Math.min(1, (timestamp - start) / duration);
    7    -1     apply(progress);
    8    -1     if (progress < 1) {
    9    -1       window.requestAnimationFrame(step);
   10    -1     }
   -1     1 (function (factory) {
   -1     2   if (typeof define === 'function' && define.amd) {
   -1     3     define([], factory());
   -1     4   } else if (typeof exports === 'object') {
   -1     5     module.exports = factory();
   -1     6   } else {
   -1     7     window.smoothScroll = factory();
   -1     8     // if not used as module, execute directly
   -1     9     window.smoothScroll.init();
   -1    10   }
   -1    11 })(function() {
   -1    12   var animate = function(apply, duration) {
   -1    13     var start = null;
   -1    14 
   -1    15     var step = function(timestamp) {
   -1    16       if (!start) start = timestamp;
   -1    17       var progress = Math.min(1, (timestamp - start) / duration);
   -1    18       apply(progress);
   -1    19       if (progress < 1) {
   -1    20         window.requestAnimationFrame(step);
   -1    21       }
   -1    22     };
   -1    23 
   -1    24     window.requestAnimationFrame(step);
   11    25   };
   12    26 
   13    -1   window.requestAnimationFrame(step);
   14    -1 };
   -1    27   var smoothScrollTo = function(endY, container, duration) {
   -1    28     container = container || window;
   -1    29     duration = duration || 250;
   15    30 
   16    -1 var smoothScrollTo = function(endY, container, duration) {
   17    -1   container = container || window;
   18    -1   duration = duration || 250;
   -1    31     var startY = container.scrollY;
   19    32 
   20    -1   var startY = container.scrollY;
   -1    33     animate(function(progress) {
   -1    34       // var f = Math.sin(Math.PI * (progress - 0.5)) / 2 + 0.5;
   -1    35       var f = (3 - 2 * progress) * progress * progress;
   -1    36       container.scrollTo(0, startY * (1 - f) + endY * f);
   -1    37     }, duration);
   -1    38   };
   21    39 
   22    -1   animate(function(progress) {
   23    -1     // var f = Math.sin(Math.PI * (progress - 0.5)) / 2 + 0.5;
   24    -1     var f = (3 - 2 * progress) * progress * progress;
   25    -1     container.scrollTo(0, startY * (1 - f) + endY * f);
   26    -1   }, duration);
   27    -1 };
   -1    40   var init = function() {
   -1    41     var smoothScrollClick = function(event) {
   -1    42       event.preventDefault();
   28    43 
   29    -1 var smoothScrollClick = function(event) {
   30    -1   event.preventDefault();
   -1    44       var selector = event.currentTarget.getAttribute('href');
   -1    45       var scrollY = document.querySelector(selector).offsetTop;
   31    46 
   32    -1   var selector = event.currentTarget.getAttribute('href');
   33    -1   var scrollY = document.querySelector(selector).offsetTop;
   -1    47       history.pushState(null, null, selector);
   -1    48       smoothScrollTo(scrollY);
   -1    49     };
   34    50 
   35    -1   history.pushState(null, null, selector);
   36    -1   smoothScrollTo(scrollY);
   37    -1 };
   -1    51     document.querySelectorAll('[href^="#"]').forEach(function(el) {
   -1    52       el.addEventListener('click', smoothScrollClick);
   -1    53     });
   -1    54   };
   38    55 
   39    -1 document.querySelectorAll('[href^="#"]').forEach(function(el) {
   40    -1   el.addEventListener('click', smoothScrollClick);
   -1    56   return {
   -1    57     animate: animate,
   -1    58     smoothScrollTo: smoothScrollTo,
   -1    59     init: init,
   -1    60   };
   41    61 });