rickklaasboer · December 16, 2019 18:11 · Dec 16, 2019 · Dec 16, 2019 · Dec 16, 2019
diff --git a/scrolltotop.md b/scrolltotop.md
@@ -1,4 +1,4 @@
-Add to HTML files (recommended place is below the opening body tag):
+Add to HTML files (recommended place is below the opening `<body>` tag):
 
 ```html
 <button onclick="scrollToTop()" id="scrollToTop" style="display: none;" title="Go to top">

diff --git a/scrolltotop.md b/scrolltotop.md
@@ -1,4 +1,4 @@
-Add to HTML files (recommended place is below the opening <body> tag):
+Add to HTML files (recommended place is below the opening body tag):
 
 ```html
 <button onclick="scrollToTop()" id="scrollToTop" style="display: none;" title="Go to top">

diff --git a/scrolltotop.md b/scrolltotop.md
@@ -0,0 +1,53 @@
+Add to HTML files (recommended place is below the opening <body> tag):
+
+```html
+<button onclick="scrollToTop()" id="scrollToTop" style="display: none;" title="Go to top">
+  <i class="fas fa-arrow-up"></i>
+</button>
+```
+
+Add to app.css (doesn't really matter where):
+
+```css
+#scrollToTop {
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 30px;
+  z-index: 99;
+  border: none;
+  outline: none;
+  background-color: #00d1b2;
+  color: white;
+  cursor: pointer;
+  padding: 15px;
+  padding-right: 19px;
+  padding-left: 19px;
+  font-size: 18px;
+  transition: all 0.2s ease-in-out;
+}
+
+#scrollToTop:hover {
+  background-color: #00b89c;
+  transition: all 0.2s ease-in;
+}
+```
+
+Add to app.js (doesn't really matter where):
+
+```js
+window.addEventListener('scroll', () => {
+    const button = document.getElementById('scrollToTop');
+    const scrollHeight = document.body.scrollTop || document.documentElement.scrollTop
+    if (scrollHeight > 20) {
+        button.style.display = "block";
+    } else {
+        button.style.display = "none";
+    }
+});
+
+scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+```
+