Ver código fonte

Fix smooth scroll code for the website

JC Brand 7 anos atrás
pai
commit
79412215b5
1 arquivos alterados com 34 adições e 17 exclusões
  1. 34 17
      src/website.js

+ 34 - 17
src/website.js

@@ -1,37 +1,54 @@
 (function () {
     document.addEventListener("DOMContentLoaded", function(event) { 
-        function scrollTo(element, to, duration, hash) {
-            if (duration <= 0) return;
-            var difference = to - element.scrollTop;
-            var perTick = difference / duration * 10;
-
-            setTimeout(function() {
-                element.scrollTop = element.scrollTop + perTick;
-                if (element.scrollTop === to) {
-                    window.location.hash = hash;
-                    return;
-                }
-                scrollTo(element, to, duration - 10, hash);
-            }, 10);
-        }
 
         window.addEventListener('scroll', function (ev) {
             var navbar = document.querySelector(".navbar");
             var fixed_top = document.querySelector(".navbar-fixed-top");
             var rect = navbar.getBoundingClientRect();
-            if (rect.top + document.body.scrollTop > 50) {
+            if (rect.top + window.scrollY > 50) {
                 fixed_top.classList.add("top-nav-collapse");
             } else {
                 fixed_top.classList.remove("top-nav-collapse");
             }
         });
 
+        var getDocumentHeight = function () {
+            return Math.max(
+                document.body.scrollHeight, document.documentElement.scrollHeight,
+                document.body.offsetHeight, document.documentElement.offsetHeight,
+                document.body.clientHeight, document.documentElement.clientHeight
+            );
+        };
+
         Array.prototype.forEach.call(document.querySelectorAll('.page-scroll a'), function (el) {
             el.addEventListener('click', function (ev) {
                 ev.preventDefault();
                 var hash = this.getAttribute("href")
-                var goal = document.querySelector(hash);
-                scrollTo(document.body, goal.offsetTop, 600, hash);
+                var endLocation = document.querySelector(hash).offsetTop;
+                var startLocation = window.pageYOffset;
+                var distance = endLocation - startLocation;
+                var start, percentage, position;
+                var timeLapsed = 0;
+
+                function scrollAnimation(timestamp) {
+                    if (!start) { start = timestamp; }
+                    timeLapsed += timestamp - start;
+                    percentage = (timeLapsed / parseInt(500, 10));
+                    percentage = (percentage > 1) ? 1 : percentage;
+                    position = startLocation + (distance * percentage * percentage);
+                    window.scrollTo(0, Math.floor(position));
+
+                    var currentLocation = window.pageYOffset;
+                    if (position == endLocation ||
+                            currentLocation == endLocation ||
+                            ((startLocation < endLocation && window.innerHeight + currentLocation) >= getDocumentHeight())) {
+                        window.location.hash = hash;
+                        return;
+                    }
+                    window.requestAnimationFrame(scrollAnimation);
+                    start = timestamp;
+                }
+                window.requestAnimationFrame(scrollAnimation);
             });
         });
     });