feat: floating action button

Author: codingwolf-at

app.js

@@ -0,0 +1,3 @@
+const scrollBtn = document.querySelector(".floating");
+
+scrollBtn.addEventListener("click", () => window.scrollTo(0,0));

css/docs.css

@@ -119,6 +119,13 @@ aside {
   display: block;
 }
 
+/* FLOATING ACTION BUTTON */
+.floating {
+  position: fixed;
+  right: 1rem;
+  bottom: 1rem;
+}
+
 /* MAIN CONTENT */
 main {
   margin-left: var(--side-nav-width);

docs.html

@@ -47,6 +47,7 @@ <h2 class="side-nav-heading">Components</h2>
   </aside>
 
   <main>
+    <button class="btn btn-dark floating">Scroll to top ⬆️</button>
     <!-- Getting Started -->
     <section id="getting-started">
       <header class="section-header">Getting Started</header>
@@ -663,6 +664,7 @@ <h2>Center Text</h2>
     <!-- highlight js -->
     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script>
     <script>hljs.highlightAll();</script>
+    <script src="./app.js"></script>
   </main>