Adding "Scroll to Top" Functionality

Contributors.md

@@ -4,5 +4,6 @@
 | --------------------- | ------------------------------------------------------------- | ---------------- |
 | Raj Kumar             |       [@raj03kumar](https://github.com/raj03kumar)            |                  |
 | --------------------- | ------------------------------------------------------------- | ---------------- |
-| Debsourya Datta       |       [@debsouryadatta](https://github.com/debsouryadatta)    |                  |
+| Ayush Nighoskar            |       [@ayushnighoskar](https://github.com/ayushnighoskar)            |                  |
 | --------------------- | ------------------------------------------------------------- | ---------------- |
+

assets/style.css

@@ -337,3 +337,32 @@ body {
   line-height: 1.4;
   word-spacing: 100vw;
 }
+
+.to-top {
+  background: white;
+  position: fixed;
+  bottom: 16px;
+  right:32px;
+  width:50px;
+  height:50px;
+  border-radius:50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32px;
+  color: #1f1f1f;
+  text-decoration: none;
+  opacity:0;
+  pointer-events: none;
+  transition: all .4s;
+}
+.to-top.active {
+  bottom: 32px;
+  pointer-events: auto;
+  opacity:1;
+}
+html {
+  scroll-behavior: smooth;
+}
+
+

filter_project.js

@@ -38,4 +38,15 @@ const displayRequiredProjects = (category, search_value) => {
     if(!found_card.length) found_card='<h2 style="color: red";>Cannot find the project</h1>'
 
     card_grid.innerHTML = found_card;
-};
+};
+
+// Scroll to the top when the button is clicked
+const toTop = document.querySelector(".to-top");
+
+window.addEventListener("scroll", () => {
+  if(window.pageYOffset >100) {
+    toTop.classList.add("active");
+  } else {
+    toTop.classList.remove("active");
+  }
+})

index.html

@@ -5,6 +5,7 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/66e60b4850.js" crossorigin="anonymous"></script>
+ <script src="https://kit.fontawesome.com/59c338ca6e.js" crossorigin="anonymous"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -206,14 +207,6 @@ <h3 class="card__heading">An Interactive Maze Game</h3>
         <h3 class="card__heading">A CSS Animation Project involving Two Candles</h3>
       </div>
     </a>
-
-    <a class="card" href="projects/Guess_word_game/index.html">
-      <div class="card__background" style="background-image: url(projects/Guess_word_game/guess_word.jpg)"></div>
-      <div class="card__content">
-        <p class="card__category">Guess Word game</p>
-        <h3 class="card__heading">A Javascript project containing word guesser game</h3>
-      </div>
-    </a>
 
     <a class="card" href="projects/image_editr/index.html">
       <div class="card__background" style="background-image: url(projects/image_editr/image_editr.jpg)"></div>
@@ -247,16 +240,12 @@ <h3 class="card__heading">Memory Game</h3>
       </div>
     </a>
 
-    <a class="card" href="projects/Clothing_Shop/index.html">
-      <div class="card__background" style="background-image: url(projects/Clothing_Shop/images/img-10.png)"></div>
-      <div class="card__content">
-        <p class="card__category">Order</p>
-        <h3 class="card__heading">Clothing Shop</h3>
-      </div>
-    </a>
-
   <div>
 </section>  
+<a href="#" class="to-top">
+  <i class="fas fa-chevron-up"></i>
+</a>
+
 
   <footer class="center bg-dark">
     <p>IEEE SSIT VIT &copy; 2023</p>

script.js

@@ -1,12 +1,3 @@
-
-
-var scrollToElement = function(el, ms){
-    var speed = (ms) ? ms : 600;
-    $('html,body').animate({
-        scrollTop: $(el).offset().top
-    }, speed);
-}
-
 $(document).ready(function() {
   $('.nav-link').on('click', function(e) {
     e.preventDefault();