Scroll to top button added in Courses page

The-Shivam-garg · Apr 14, 2022 · 7f14608 · 7f14608
1 parent a7af8c9
commit 7f14608
Show file tree

Hide file tree

Showing 3 changed files with 537 additions and 528 deletions.
diff --git a/Course/Courses.html b/Course/Courses.html
@@ -42,14 +42,12 @@
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <!--using-Font-Awesome-------------------->
     <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="./style.css" />
 </head>
 
 <body>
 
     <!-- floating button to the top -->
-    <a href="#" id="scroll"><span></span></a>
-
 
     <div class="sidebar">
         <div class="logo-details">
@@ -319,11 +317,11 @@ <h3 class="lg-text">Have a Question?</h3>
                             </div>
                         </div>
                     </div>
+                    <div class="topbtn" id="scrollbtn"> 🔝 </div>
                 </div>
-
                 <p class="footer-text">Copyright &copy; 2021. Designed by <span>BigB</span>. All Rights Reserved.</p>
             </footer>
-
+            
         </div>
     </main>
     <!-- footer section ends -->

diff --git a/Course/script1.js b/Course/script1.js
@@ -3,20 +3,32 @@ let closeBtn = document.querySelector("#btn");
 let searchBtn = document.querySelector(".bx-search");
 
 closeBtn.addEventListener("click", () => {
-    sidebar.classList.toggle("open");
-    menuBtnChange(); //calling the function(optional)
+  sidebar.classList.toggle("open");
+  menuBtnChange(); //calling the function(optional)
 });
 
-searchBtn.addEventListener("click", () => { // Sidebar open when you click on the search iocn
-    sidebar.classList.toggle("open");
-    menuBtnChange(); //calling the function(optional)
+searchBtn.addEventListener("click", () => {
+  // Sidebar open when you click on the search iocn
+  sidebar.classList.toggle("open");
+  menuBtnChange(); //calling the function(optional)
 });
 
 // following are the code to change sidebar button(optional)
 function menuBtnChange() {
-    if (sidebar.classList.contains("open")) {
-        closeBtn.classList.replace("bx-menu", "bx-menu-alt-right"); //replacing the iocns class
-    } else {
-        closeBtn.classList.replace("bx-menu-alt-right", "bx-menu"); //replacing the iocns class
-    }
-}
+  if (sidebar.classList.contains("open")) {
+    closeBtn.classList.replace("bx-menu", "bx-menu-alt-right"); //replacing the iocns class
+  } else {
+    closeBtn.classList.replace("bx-menu-alt-right", "bx-menu"); //replacing the iocns class
+  }
+}
+const scrollbtn = document.getElementById("scrollbtn");
+console.log(scrollbtn);
+scrollbtn.addEventListener("click", myFunction);
+
+function myFunction() {
+  window.scrollTo({
+    top: 0,
+    left: 0,
+    behavior: "smooth",
+  });
+}