fix: scrolltop button

kai687 · Oct 4, 2024 · d3c8194 · d3c8194
1 parent 12a42cd
commit d3c8194
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 5 deletions.
diff --git a/src/sphinxawesome_theme/layout.html b/src/sphinxawesome_theme/layout.html
@@ -84,7 +84,9 @@
 
     {%- block extrahead %}{%- endblock extrahead %}
 </head>
-<body x-data="{ showSidebar: false }" class="min-h-screen font-sans antialiased bg-background text-foreground" :class="{ 'overflow-hidden': showSidebar }">
+  <body x-data="{ showSidebar: false, showScrollTop: false }" class="min-h-screen font-sans antialiased bg-background text-foreground" :class="{ 'overflow-hidden': showSidebar }"
+    {%- if theme_show_scrolltop|tobool -%}@scroll.window="showScrollTop = pageYOffset > 100"{%- endif -%}
+  >
 
   {#- A blurry background screen for the mobile sidebar -#}
   {%- if sidebars|length > 0 %}
@@ -131,6 +133,9 @@
       {%- include "footer.html" %}
     {%- endblock footer %}
   </div>
+  {%- if theme_show_scrolltop|tobool %}
+    {%- include "scrolltop.html" %}
+  {%- endif %}
   {% block scripts %}
   {%- for js in script_files %}
     {{ js_tag(js) }}

diff --git a/src/sphinxawesome_theme/scrolltop.html b/src/sphinxawesome_theme/scrolltop.html
@@ -1,9 +1,12 @@
 {#-
 A `scroll to top` button. Is shown at the bottom right if `show_scrolltop` is true.
 -#}
-<button data-scroll-to-top-target="scrollToTop"
-        data-action="scroll-to-top#scroll"
-        class="fixed bottom-8 right-8 p-2 z-10 rounded-sm bg-gray-700 text-xs text-white invisible opacity-0 transition-all duration-1000 hover:bg-gray-950 focus:bg-gray-950">
+<button id="scrolltop"
+        x-cloak
+        @click="window.scrollTo({top: 0, behavior: 'smooth'})"
+        class="fixed bottom-8 right-8 p-2 z-10 rounded-sm bg-gray-700 text-xs text-white transition-all duration-1000 hover:bg-gray-950 focus:bg-gray-950"
+        :class="{'opacity-0 invisible' : !showScrollTop}"
+>
   <svg xmlns="http://www.w3.org/2000/svg"
        height="14"
        viewBox="0 96 960 960"

diff --git a/src/sphinxawesome_theme/static/theme.css b/src/sphinxawesome_theme/static/theme.css
diff --git a/tests/test_scrolltop.py b/tests/test_scrolltop.py
@@ -0,0 +1,40 @@
+"""Test the presence or absense of the scroll to top button."""
+
+import os
+from pathlib import Path
+
+import pytest
+from sphinx.application import Sphinx
+
+from .util import parse_html
+
+
+@pytest.mark.sphinx(
+    "html",
+    confoverrides={
+        "html_theme": "sphinxawesome_theme",
+    },
+)
+def test_no_scroll_top_button(app: Sphinx) -> None:
+    """It doesn't have a scroll to top button by default."""
+    app.build()
+    assert os.path.exists(Path(app.outdir) / "index.html")
+    tree = parse_html(Path(app.outdir) / "index.html")
+    button = tree.select("button#scrolltop")
+    assert len(button) == 0
+
+
+@pytest.mark.sphinx(
+    "html",
+    confoverrides={
+        "html_theme": "sphinxawesome_theme",
+        "html_theme_options": {"show_scrolltop": True},
+    },
+)
+def test_scroll_top_button(app: Sphinx) -> None:
+    """It shows a scroll to top button."""
+    app.build()
+    assert os.path.exists(Path(app.outdir) / "index.html")
+    tree = parse_html(Path(app.outdir) / "index.html")
+    button = tree.select("button#scrolltop")
+    assert len(button) == 1