Fix bug: click the TOP button didn't scroll back to top

zivong · Jul 3, 2020 · 3498003 · 3498003
1 parent 5cc8056
commit 3498003
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/_layouts/archive-taxonomies.html b/_layouts/archive-taxonomies.html
@@ -70,7 +70,14 @@ <h2 id="{{ slugified_taxonomy_name }}">
           </li>
         {%- endfor -%}
       </ul>
-      <a href="#" class="back-to-top">Top &#8648;</a>
+      <a href="#" onclick="backToTop()" class="back-to-top">Top &#8648;</a>
     {%- endif -%}
   {%- endfor -%}
 {%- endfor -%}
+
+<script>
+  function backToTop() {
+    const main = document.getElementById("site-main");
+    main.scrollTop = 0;
+  }
+</script>
diff --git a/_layouts/archive-years.html b/_layouts/archive-years.html
@@ -33,5 +33,12 @@ <h2 id="{{ taxonomy.name }}">
       </li>
     {%- endfor -%}
   </ul>
-  <a href="#" class="back-to-top">Top &#8648;</a>
+  <a href="#" onclick="backToTop()" class="back-to-top">Top &#8648;</a>
 {%- endfor -%}
+
+<script>
+  function backToTop() {
+    const main = document.getElementById("site-main");
+    main.scrollTop = 0;
+  }
+</script>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -15,7 +15,7 @@
         <aside class="site-sidebar" id="site-sidebar">
           {% include sidebar.html %}
         </aside>
-        <main class="site-main" aria-label="Content">
+        <main class="site-main" id="site-main" aria-label="Content">
           {{ content }}
           <footer class="site-footer">
             {% include footer.html %}