smooth-scroll

commit

c978c30fd72f93f09dead89f2502a7dbae7a7761

parent

57ff2275fd8b2dbdd26f36d8be06c1538adffee8

Author

Tobias Bengfort <tobias.bengfort@gmx.net>

Date

2016-11-18 15:07

init

Diffstat

2 files changed, 47 insertions, 0 deletions

diff --git a/TODO b/TODO

@@ -0,0 +1,9 @@
   -1     1 -	fixed header support
   -1     2 -	packaging
   -1     3 -	use from javascript
   -1     4 -	horizontal scrolling
   -1     5 -	standards compliant
   -1     6 -	other containers
   -1     7 -	change direction mid-scroll
   -1     8 -	smooth scroll on history change (back button)
   -1     9 !	merge upstream

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

@@ -0,0 +1,38 @@
   -1     1 var animate = function(apply, duration) {
   -1     2   var start = null;
   -1     3 
   -1     4   var step = function(timestamp) {
   -1     5     if (!start) start = timestamp;
   -1     6     var progress = Math.min(1, (timestamp - start) / duration);
   -1     7     apply(progress);
   -1     8     if (progress < 1) {
   -1     9       window.requestAnimationFrame(step);
   -1    10     }
   -1    11   };
   -1    12 
   -1    13   window.requestAnimationFrame(step);
   -1    14 };
   -1    15 
   -1    16 var smoothScroll = function(endY) {
   -1    17   var startY = window.scrollY;
   -1    18 
   -1    19   animate(function(progress) {
   -1    20     // var f = Math.sin(Math.PI * (progress - 0.5)) / 2 + 0.5;
   -1    21     var f = (3 - 2 * progress) * progress * progress;
   -1    22     window.scrollTo(0, startY * (1 - f) + endY * f);
   -1    23   }, 250);
   -1    24 };
   -1    25 
   -1    26 var smoothScrollClick = function(event) {
   -1    27   event.preventDefault();
   -1    28 
   -1    29   var selector = event.currentTarget.getAttribute('href');
   -1    30   var scrollY = document.querySelector(selector).offsetTop;
   -1    31 
   -1    32   history.pushState(null, null, selector);
   -1    33   smoothScroll(scrollY);
   -1    34 };
   -1    35 
   -1    36 document.querySelectorAll('[href^="#"]').forEach(function(el) {
   -1    37   el.addEventListener('click', smoothScrollClick);
   -1    38 });