Fixed back-to-top button when using instant loading

material/base.html

@@ -40,7 +40,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.7bf56d0a.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.c4a75a56.min.css' | url }}">
       {% if config.theme.palette %}
         {% set palette = config.theme.palette %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.a0c5b2b5.min.css' | url }}">
@@ -183,10 +183,10 @@
           {% include "partials/javascripts/content.html" %}
         </div>
         {% if "navigation.top" in features %}
-          <a href="#" class="md-top md-icon" data-md-component="top" hidden>
+          <button type="button" class="md-top md-icon" data-md-component="top" hidden>
             {% include ".icons/material/arrow-up.svg" %}
             {{ lang.t("top") }}
-          </a>
+          </button>
         {% endif %}
       </main>
       {% block footer %}
@@ -240,7 +240,7 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.fc8c2696.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.efa0ade1.min.js' | url }}"></script>
       {% for path in config.extra_javascript %}
         <script src="{{ path | url }}"></script>
       {% endfor %}

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

@@ -29,6 +29,7 @@ import {
   distinctUntilKeyChanged,
   endWith,
   finalize,
+  fromEvent,
   ignoreElements,
   map,
   repeat,
@@ -166,6 +167,13 @@ export function mountBackToTop(
         el.style.top = `${height + 16}px`
       })
 
+  /* Go back to top */
+  fromEvent(el, "click")
+    .subscribe(ev => {
+      ev.preventDefault()
+      window.scrollTo({ top: 0 })
+    })
+
   /* Create and return component */
   return watchBackToTop(el, { viewport$, main$, target$ })
     .pipe(

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

@@ -34,6 +34,7 @@
   margin-inline-start: 50%;
   font-size: px2rem(14px);
   color: var(--md-default-fg-color--light);
+  cursor: pointer;
   background-color: var(--md-default-bg-color);
   border-radius: px2rem(32px);
   outline: none;

src/base.html

@@ -334,15 +334,15 @@
 
         <!-- Back-to-top button -->
         {% if "navigation.top" in features %}
-          <a
-            href="#"
+          <button
+            type="button"
             class="md-top md-icon"
             data-md-component="top"
             hidden
           >
             {% include ".icons/material/arrow-up.svg" %}
             {{ lang.t("top") }}
-          </a>
+          </button>
         {% endif %}
       </main>