JavaScript animated scrollTo

JavaScript easing Scroll to Element, ohne großes Framework.

animatedScrollTo.js JavaScript (981 Bytes) 17.04.2014 11:03
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function(callback){
            window.setTimeout(callback, 1000 / 60);
          };
})();

function animateScrollTo(id) {
  var node = document.getElementById(id);
  if (node) {
    var to = 0;
    var from = window.pageYOffset;
    do {
      to += node.offsetTop;
//      from += node.offsetParent ? node.offsetParent.scrollTop : 0;
      node = node.offsetParent;
    } while (node)
    if (from == to) return;
    var start = Date.now();
    var tick = function() {
      var t = Math.min(1, ((Date.now() - start) / 1000));
      var eased =  t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1;
      var val = (eased * (to - from)) + from;
      window.scrollTo(0, val);
      if (t<1) { 
        window.requestAnimFrame(tick);
      }
    };
    tick();
  }
}

Kontakt

Udo Schmal
Udo Schmal

Udo Schmal
Softwareentwickler
Ellerndiek 26
24837 Schleswig
Schleswig-Holstein
Germany




+49 4621 9785538
+49 1575 0663676
+49 4621 9785539
SMS
WhatsApp

Google Maps Profile
Instagram Profile
vCard 2.1, vCard 3.0, vCard 4.0

Service Infos

CMS Info

Product Name:
UDOs Webserver
Version:
0.5.1.225
Description:
All in one Webserver
Copyright:
Udo Schmal
Compilation:
Thu, 5. Dec 2024 22:30:51

Development Info

Compiler:
Free Pascal FPC 3.3.1
compiled for:
OS:Linux, CPU:x86_64

System Info

OS:
Ubuntu 22.04.5 LTS (Jammy Jellyfish)

Hardware Info

Model:
Hewlett-Packard HP Pavilion dm4 Notebook PC
CPU Name:
Intel(R) Core(TM) i5-2430M CPU @ 2.40GHz
CPU Type:
x86_64, 1 physical CPU(s), 2 Core(s), 4 logical CPU(s),  MHz