[matrix] Add scroll to top button

3 files changed, 49 insertions, 0 deletions

diff --git a/docs/_static/custom.js b/docs/_static/custom.js
index 1274b405..f3cfa461 100644
--- 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
index c9385bbf..96d5ab0a 100644
--- 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
index 1d6de6d3..2fbf5159 100644
--- a/docs/_templates/layout.html
+++ b/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>