Regular Update

Added a Back to Top button and fixed the issue were the page would randomly scroll to the bottom.
rickklaasboer · May 12, 2018 · d0af77b · d0af77b
1 parent efdc3dc
commit d0af77b
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 4 deletions.
diff --git a/css/main.css b/css/main.css
@@ -53,6 +53,29 @@ a:hover {
 	transition: all .2s ease-in;
 }
 
+#myBtn {
+    display: none;
+    position: fixed;
+    bottom: 20px;
+    right: 30px;
+    z-index: 99;
+    border: none;
+    outline: none;
+    background-color: #3498db;
+    color: white;
+    cursor: pointer;
+    padding: 15px;
+    padding-right: 19px;
+    padding-left: 19px;
+    font-size: 18px;
+    transition: all .2s ease-in;
+}
+
+#myBtn:hover {
+    background-color: #2980b9;
+    transition: all .2s ease-in;
+}
+
 /* Navbar */
 
 .topnav {
@@ -63,10 +86,6 @@ a:hover {
     transition: all .2s ease-in;
     font-weight: 700;
     text-transform: uppercase;
-    position: fixed;
-    width: 100%;
-    top: 0;
-    z-index: 1;
 }
 
 .topnav a {

diff --git a/index.html b/index.html
@@ -42,6 +42,8 @@
 
 </head>
 <body>
+
+	<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fas fa-arrow-up"></i></button> 
 
 	<!-- Navbar -->
 	<div class="topnav" id="myTopnav">
@@ -335,5 +337,24 @@ <h2>Some dude</h2>
 		}
 	</script>
 
+	<script>
+	// When the user scrolls down 20px from the top of the document, show the button
+	window.onscroll = function() {scrollFunction()};
+
+	function scrollFunction() {
+	    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+	        document.getElementById("myBtn").style.display = "block";
+	    } else {
+	        document.getElementById("myBtn").style.display = "none";
+	    }
+	}
+
+	// When the user clicks on the button, scroll to the top of the document
+	function topFunction() {
+	    document.body.scrollTop = 0;
+	    document.documentElement.scrollTop = 0;
+	}
+	</script>
+
 </body>
 </html>