smooth back to top animation

semanticdata · Oct 16, 2024 · b94ddae · b94ddae
1 parent 748bcc4
commit b94ddae
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/sass/_pagination.scss b/sass/_pagination.scss
@@ -21,6 +21,7 @@
 
     &:hover {
       opacity: 1;
+      cursor: pointer;
     }
   }
 

diff --git a/templates/page.html b/templates/page.html
@@ -21,7 +21,7 @@ <h1 class="post-title">{{ page.title }}</h1>
   {% if page.higher -%}
   <a href="{{ page.higher.permalink | safe }}" class="left arrow">&#8592;</a>
   {%- endif %}
-  <a href="#" class="top">Top</a>
+  {% include "partials/back-to-top.html" %}
   {% if page.lower -%}
   <a href="{{ page.lower.permalink | safe }}" class="right arrow">&#8594;</a>
   {%- endif %}

diff --git a/templates/partials/back-to-top.html b/templates/partials/back-to-top.html
@@ -0,0 +1,6 @@
+<a class="top" id="goToTopBtn" onclick="goToTop()" title="Go to top">Top</a>
+<script>
+    function goToTop() {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+</script>
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,6 +21,7 @@ @@
         &:hover {
           opacity: 1;
+          cursor: pointer;
         }
       }
@@ Expand Down @@