Improved back-to-top button during fast scrolling

src/assets/javascripts/components/top/index.ts

@@ -139,7 +139,7 @@ export function mountBackToTop(
 
     /* Handle emission */
     next({ hidden }) {
-      el.classList.toggle("md-top--hidden", hidden)
+      el.hidden = hidden
       if (hidden) {
         el.setAttribute("tabindex", "-1")
         el.blur()
@@ -151,7 +151,7 @@ export function mountBackToTop(
     /* Handle complete */
     complete() {
       el.style.top = ""
-      el.classList.add("md-top--hidden")
+      el.hidden = true
       el.removeAttribute("tabindex")
     }
   })

src/assets/stylesheets/main/layout/_tabs.scss

@@ -26,6 +26,9 @@
 
 // Navigation tabs
 .md-tabs {
+  // Must be higher than the z-index of the back-to-top button, or the button
+  // will overlay the navigation tabs bar when scrolling up fast.
+  z-index: 3;
   width: 100%;
   overflow: auto;
   color: var(--md-primary-bg-color);

src/assets/stylesheets/main/layout/_top.scss

@@ -29,6 +29,7 @@
   position: fixed;
   top: px2rem(48px + 16px);
   z-index: 2;
+  display: block;
   margin-inline-start: 50%;
   padding: px2rem(8px) px2rem(16px);
   color: var(--md-default-fg-color--light);
@@ -55,7 +56,7 @@
   }
 
   // Back-to-top button is hidden
-  &--hidden {
+  &[hidden] {
     transform: translate(-50%, px2rem(4px));
     opacity: 0;
     transition-duration: 0ms;

src/base.html

@@ -307,8 +307,9 @@
         {% if "navigation.top" in features %}
           <a
             href="#"
-            class="md-top md-top--hidden md-icon"
+            class="md-top md-icon"
             data-md-component="top"
+            hidden
           >
             {% include ".icons/material/arrow-up.svg" %}
             {{ lang.t('top.title') }}