Improved back-to-top button during fast scrolling

material/base.html

@@ -34,7 +34,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.5d38496d.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.ed05e878.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.cbb835fc.min.css' | url }}">
@@ -169,7 +169,7 @@
           </div>
         </div>
         {% if "navigation.top" in features %}
-          <a href="#" class="md-top md-top--hidden md-icon" data-md-component="top">
+          <a href="#" class="md-top md-icon" data-md-component="top" hidden>
             {% include ".icons/material/arrow-up.svg" %}
             {{ lang.t('top.title') }}
           </a>
@@ -216,7 +216,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.7f366e99.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.f9fdf24d.min.js' | url }}"></script>
       {% for path in config["extra_javascript"] %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

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') }}