[matrix] Add scroll to top button

docs/_static/custom.js

@@ -5,6 +5,7 @@ let bottomHeightThreshold, sections;
 let hamburgerToggle;
 let mobileSearch;
 let sidebar;
+let toTop;
 
 class Modal {
   constructor(element) {
@@ -49,6 +50,10 @@ class SearchBar {
 
 }
 
+function scrollToTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
 document.addEventListener('DOMContentLoaded', () => {
   mobileSearch = new SearchBar();
 
@@ -56,6 +61,9 @@ document.addEventListener('DOMContentLoaded', () => {
   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) => {
       sidebar.element.classList.toggle('sidebar-toggle');
@@ -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) => {

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 {

docs/_templates/layout.html

@@ -190,5 +190,9 @@
     </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>