Add scroll transition when redirecting

index.html

@@ -124,35 +124,32 @@
       </div>
     </nav>
 
-    <section class="relative bg-gray-100 border-y border-gray-200">
-      <div class="mx-auto max-w-screen-xl px-4 flex justify-center">
+    <section class="bg-gray-100 border-y border-gray-200">
+      <div class="mx-auto max-w-screen-xl px-4 flex text-sm font-medium">
         <a
           href="https://github.com/rayc2045/Hyper"
           rel="noreferrer"
           target="_blank"
-          class="w-full flex justify-center items-center gap-1.5 hover:opacity-75 transition"
+          class="w-full flex justify-center items-center gap-2 hover:opacity-75 transition"
         >
-          <span
-            class="text-sm/none font-medium"
-            x-text="`Enjoy ${BRAND_NAME}? Give it a star on GitHub`"
-          ></span>
+          <span x-text="`Enjoy ${BRAND_NAME}? Give it a star on GitHub`"></span>
           <span aria-hidden="true" role="img">🎉</span>
         </a>
         <button
           aria-label="Close"
-          class="p-2 mr-1 text-sm text-gray-500"
-          @click="$el.parentNode.remove()"
+          class="p-2 mr-1 text-gray-500"
+          @click="$el.closest('section').remove()"
         >
           ✕
         </button>
       </div>
     </section>
 
     <main
-      class="py-16 flex-1 grid"
+      class="relative py-16 flex-1"
       x-init="router.updatePath()"
       x-html="router.getPageHTML()"
-      @hashchange.window="router.updatePath(); scrollToTop();"
+      @hashchange.window="await scrollToTop(); router.updatePath();"
     ></main>
 
     <footer class="border-t border-gray-200 bg-white">

src/app.js

@@ -36,8 +36,10 @@ const utils = {
     });
     return entries;
   },
-  scrollToTop() {
+  async scrollToTop() {
     scrollTo({ top: 0, behavior: 'smooth' });
+    if (document.body.offsetHeight > window.innerHeight && window.scrollY > 0)
+      await this.delay(0.55);
   },
   getScrollProgress() {
     const winScroll =