11-Back to Top

codewithchu · codewithchu · commit 7a6efedeeab1 · 2020-10-09T18:31:41.000-04:00
diff --git a/public/index.html b/public/index.html
@@ -244,8 +244,8 @@ <h4>Follow Us</h4>
                 </p>
             </div>
         </footer>
-        <div class="hidden">
-            <a href="">
+        <div class="fixed z-30 bottom-0 right-0 mr-6 mb-6">
+            <a id="back2Top" href="#" class="hidden text-white bg-red-800 bg-opacity-50 rounded-md">
                 <span class="hidden">Back to Top</span>
                 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24" class="h-10 w-10">
                     <path fill="currentColor" d="M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z" />
diff --git a/public/js/index.js b/public/js/index.js
@@ -2,6 +2,7 @@ const nav = document.querySelector('#mainNav');
 const mobileMenu = document.querySelector('#mobileMenu');
 const mobileMenuIcons = mobileMenu.querySelectorAll('svg');
 const mainMenu = document.querySelector('#mainMenu');
+const back2Top = document.querySelector('#back2Top');
 
 //functions
 function toggleBurger() {
@@ -25,3 +26,8 @@ mobileMenu.addEventListener('click', (e) => {
 
     toggleBurger();
 });
+
+back2Top.addEventListener('click', (e) => {
+    e.preventDefault();
+    window.scroll({ top: 0, left: 0, behavior: 'smooth' });
+});
