From eaeca0641498c353202285d9cdf6464c28f834f3 Mon Sep 17 00:00:00 2001 From: erdgeist Date: Mon, 8 Aug 2016 21:30:24 +0200 Subject: Improve scroller function --- js/abmahn.js | 67 ++++++++++++++++++++++++++++++++++-------------------------- 1 file changed, 38 insertions(+), 29 deletions(-) diff --git a/js/abmahn.js b/js/abmahn.js index 7237901..1b8d7c1 100644 --- a/js/abmahn.js +++ b/js/abmahn.js @@ -12,40 +12,49 @@ function setText(input, text) { document.getElementById(input).value = text; } -function scrollTo(to, duration) { - if (document.body.scrollTop == to) return; - var diff = to - document.body.scrollTop; - var scrollStep = Math.PI / (duration / 10); - var count = 0, currPos; - start = document.body.scrollTop; - scrollInterval = setInterval(function(){ - if (document.body.scrollTop != to) { - count = count + 1; - currPos = start + diff * (0.5 - 0.5 * Math.cos(count * scrollStep)); - document.body.scrollTop = currPos; - } - else { clearInterval(scrollInterval); } - },10); -} - - -function scroll(id) { -// document.getElementById(id).scrollIntoView(); - scrollTo( document.getElementById(id).offsetTop, 500 ); -} - function setClass(id, classes) { document.getElementById(id).className = classes; } +function scrollTo(el) { + if(document.querySelectorAll === void 0 || window.pageYOffset === void 0 || history.pushState === void 0) { + el.scrollIntoView(); + return; + } + var duration = 500; + var start = window.pageYOffset; + var end = document.getElementById(el).getBoundingClientRect().top + window.pageYOffset; + + var clock = Date.now(); + var requestAnimationFrame = window.requestAnimationFrame || + window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || + function(fn){window.setTimeout(fn, 15);}; + + var step = function(){ + var elapsed = Date.now() - clock; + var t = elapsed / duration; + if (elapsed > duration) + var pos =end; + else + var pos = start + (end - start) * (t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1); + + window.scroll(window.pageXOffset, pos); + + if (elapsed <= duration) { + requestAnimationFrame(step); + } + } + step(); +} + function step0_cancel() { setClass('wrapper', 'stepcancel'); } -function step0_done() { setClass('wrapper', 'step1'); scrollTo(document.body, 0, 100); } -function step1_done() { setClass('wrapper', 'step2'); scroll('head1'); } -function step2_done() { setClass('wrapper', 'step3'); scroll('head2'); } -function step3_done() { setClass('wrapper', 'step4'); scroll('head3'); } -function step4_done() { setClass('wrapper', 'step5'); scroll('head4'); } -function step5_done() { setClass('wrapper', 'step6'); scroll('head5'); } -function step6_done() { setClass('wrapper', 'step7'); scroll('head6'); } +function step0_done() { setClass('wrapper', 'step1'); scrollTo('head1'); } +function step1_done() { setClass('wrapper', 'step2'); scrollTo('head1'); } +function step2_done() { setClass('wrapper', 'step3'); scrollTo('head2'); } +function step3_done() { setClass('wrapper', 'step4'); scrollTo('head3'); } +function step4_done() { setClass('wrapper', 'step5'); scrollTo('head4'); } +function step5_done() { setClass('wrapper', 'step6'); scrollTo('head5'); } +function step6_done() { setClass('wrapper', 'step7'); scrollTo('head6'); } function waldorff() { setText('abmahnender_kanzlei', 'Waldorff & Frommer RAe'); -- cgit v1.2.3