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 ( zero ,  zero ) ;
+         setTimeout ( ( )  =>  window . scrollTo ( zero ,  zero ) ) ;
+     }
+
      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  =  one ;
          [
              '.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  =  one ;
              $ ( 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  *  one hundred ) ;
+         }
      } ) ;
- } ( ) ) ;
+ } ) ( ) ;