[matrix] Add scroll to top button

manubernat · Jan 12, 2021 · f78f135 · f78f135
1 parent bc0e214
commit f78f135
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 0 deletions.
diff --git a/docs/_static/custom.js b/docs/_static/custom.js
@@ -5,6 +5,7 @@ let bottomHeightThreshold, sections;
 let hamburgerToggle;
 let mobileSearch;
 let sidebar;
+let toTop;
 
 class Modal {
   constructor(element) {
@@ -49,12 +50,19 @@ class SearchBar {
 
 }
 
+function scrollToTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   mobileSearch = new SearchBar();
 
   bottomHeightThreshold = document.documentElement.scrollHeight - 30;
   sections = document.querySelectorAll('section');
   hamburgerToggle = document.getElementById('hamburger-toggle');
+
+  toTop = document.getElementById('to-top');
+  toTop.hidden = !(window.scrollY > 0);
 
   if (hamburgerToggle) {
     hamburgerToggle.addEventListener('click', (e) => {
@@ -76,6 +84,10 @@ document.addEventListener('DOMContentLoaded', () => {
     // insert ourselves after the element
     parent.insertBefore(table, element.nextSibling);
   });
+
+  window.addEventListener('scroll', () => {
+    toTop.hidden = !(window.scrollY > 0);
+  });
 });
 
 document.addEventListener('keydown', (event) => {

diff --git a/docs/_static/style.css b/docs/_static/style.css
@@ -97,6 +97,8 @@ Historically however, thanks to:
   --rtd-ad-background: var(--grey-2);
   --rtd-ad-main-text: var(--grey-6);
   --rtd-ad-small-text: var(--grey-4);
+  --rtd-version-background: #272525;
+  --rtd-version-main-text: #fcfcfc;
   --attribute-table-title: var(--grey-6);
   --attribute-table-entry-border: var(--grey-3);
   --attribute-table-entry-text: var(--grey-5);
@@ -576,6 +578,37 @@ div.modal input {
   cursor: pointer;
 }
 
+/* scroll to top button */
+
+#to-top {
+  position: fixed;
+  bottom: 50px;
+  right: 20px;
+
+  cursor: pointer;
+}
+
+#to-top.is-rtd {
+  bottom: 90px;
+}
+
+#to-top > span {
+  display: block;
+
+  width: auto;
+  height: 30px;
+  padding: 0 6px;
+
+  background-color: var(--rtd-version-background);
+  color: var(--rtd-version-main-text);
+}
+
+#to-top span {
+  line-height: 30px;
+  font-size: 90%;
+  text-align: center;
+}
+
 /* copy button */
 
 .relative-copy {

diff --git a/docs/_templates/layout.html b/docs/_templates/layout.html
@@ -190,5 +190,9 @@ <h3>
     </div>
   </div>
 
+  <div id="to-top" onclick="scrollToTop()"{%- if READTHEDOCS %} class="is-rtd"{%- endif %} hidden>
+    <span><span class="material-icons">arrow_upward</span> to top</span>
+  </div>
+
 </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -190,5 +190,9 @@ <h3> @@
         </div>
       </div>
+      <div id="to-top" onclick="scrollToTop()"{%- if READTHEDOCS %} class="is-rtd"{%- endif %} hidden>
+        <span><span class="material-icons">arrow_upward</span> to top</span>
+      </div>
     </body>
     </html>