fix(view): jump to correct hash element with animation.js

ppoffice · Sep 12, 2022 · 199a9d1 · 199a9d1 · ppoffice · Sep 12, 2022
1 parent f28825d
commit 199a9d1
Showing 1 changed file with 19 additions and 5 deletions.
diff --git a/source/js/animation.js b/source/js/animation.js
@@ -1,4 +1,4 @@
-(function() {
+(function () {
     function $() {
         return Array.prototype.slice.call(document.querySelectorAll.apply(document, arguments));
     }
@@ -11,7 +11,7 @@
     [
         '.column-main > .card, .column-main > .pagination, .column-main > .post-navigation',
         '.column-left > .card, .column-right-shadow > .card',
-        '.column-right > .card'
+        '.column-right > .card',
     ].forEach(selector => {
         $(selector).forEach(element => {
             element.style.transition = '0s';
@@ -20,18 +20,25 @@
             element.style.transformOrigin = 'center top';
         });
     });
+    // disable jump to location.hash
+    if (window.location.hash) {
+        window.scrollTo(0, 0);
+        setTimeout(() => window.scrollTo(0, 0));
+    }
+
     setTimeout(() => {
         $('body > .navbar, body > .section, body > .footer').forEach(element => {
             element.style.opacity = '1';
             element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
         });
         document.querySelector('body > .navbar').style.transform = 'translateY(0)';
+
+        let i = 1;
         [
             '.column-main > .card, .column-main > .pagination, .column-main > .post-navigation',
             '.column-left > .card, .column-right-shadow > .card',
-            '.column-right > .card'
+            '.column-right > .card',
         ].forEach(selector => {
-            let i = 1;
             $(selector).forEach(element => {
                 setTimeout(() => {
                     element.style.opacity = '1';
@@ -41,5 +48,12 @@
                 i++;
             });
         });
+
+        // jump to location.hash
+        if (window.location.hash) {
+            setTimeout(() => {
+                document.querySelector(window.location.hash).scrollIntoView({ behavior: 'smooth' });
+            }, i * 100);
+        }
     });
-}());
+})();