Merge pull request #744 from barunipriyats/master

Added back-to-top button in contributors.html
fineanmol · Oct 9, 2021 · 52dfe2a · 52dfe2a
2 parents 037d043 + fd3bb16
commit 52dfe2a
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 3 deletions.
diff --git a/Contributors.html b/Contributors.html
@@ -43,11 +43,16 @@
   <link rel="stylesheet" href="css/explosion.css">
   <link rel="stylesheet" href="./css/terminal.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
+  <script src="https://kit.fontawesome.com/d9f7ec7b29.js" crossorigin="anonymous"></script>
   <title>Hacktoberfest 2021 - Contributors</title>
 
 </head>
 
 <body>
+
+  <!-- Back-to-top Button -->
+  <button id="back-to-top-btn"><i class="fas fa-angle-double-up"></i></button>
+
   <!--
       __  __              __    __          __                 ____             __
     / / / /____ _ _____ / /__ / /_ ____   / /_   ___   _____ / __/___   _____ / /_
@@ -85,7 +90,7 @@
   </nav>
   <div class="content">
     <div class="container">
-      <span class="heading">CONTRIBUTERS </span>
+      <span class="heading">CONTRIBUTORS </span>
 
       <div class="heart"></div>
       <label class="theme-switch" for="checkbox">
@@ -349,7 +354,7 @@
       <a class="box-item" href="https://github.com/NEELAKANTAGOUDAPATIL"><span>NEELAKANTA GOUDA PATIL</span></a>
       <a class="box-item" href="https://github.com/shashishekhar11"><span>shashishekhar11</span></a>
       <a class="box-item" href="https://github.com/H-M-Noman123"><span>H-M-Noman123</span></a>
-
+      <a class="box-item" href="https://github.com/barunipriyats/"><span>Baruni Priya T S</span></a>
 
 
 
@@ -414,6 +419,54 @@
       }, 750 * (idx + 1))
     });
 
+
+    /* Back-to-top button functionality */
+  const backToTopButton = document.querySelector("#back-to-top-btn");
+
+  window.addEventListener("scroll", scrollFunction);
+  function scrollFunction() {
+  if (window.pageYOffset > 300) { // Show backToTopButton
+      if(!backToTopButton.classList.contains("btnEntrance")) {
+      backToTopButton.classList.remove("btnExit");
+      backToTopButton.classList.add("btnEntrance");
+      backToTopButton.style.display = "block";
+      }
+  }
+  else { // Hide backToTopButton
+      if(backToTopButton.classList.contains("btnEntrance")) {
+      backToTopButton.classList.remove("btnEntrance");
+      backToTopButton.classList.add("btnExit");
+      setTimeout(function() {
+          backToTopButton.style.display = "none";
+      }, 250);
+      }
+  }
+  }
+
+  backToTopButton.addEventListener("click", smoothScrollBackToTop);
+
+  function smoothScrollBackToTop() {
+  const targetPosition = 0;
+  const startPosition = window.pageYOffset;
+  const distance = targetPosition - startPosition;
+  const duration = 750;
+  let start = null;
+  window.requestAnimationFrame(step);
+  function step(timestamp) {
+      if (!start) start = timestamp;
+      const progress = timestamp - start;
+      window.scrollTo(0, easeInOutCubic(progress, startPosition, distance, duration));
+      if (progress < duration) window.requestAnimationFrame(step);
+  }
+  }
+
+  function easeInOutCubic(t, b, c, d) {
+  t /= d/2;
+  if (t < 1) return c/2*t*t*t + b;
+  t -= 2;
+  return c/2*(t*t*t + 2) + b;
+  };
+
   </script>
   <script src="/scripts/scroll.js"></script>
 

diff --git a/css/contributors.css b/css/contributors.css
@@ -72,6 +72,35 @@ body {
   font-family: "Open Sans", sans-serif;
   font-size: 16px;
 }
+
+#back-to-top-btn {
+  z-index: 1000;
+  display: none;
+  position: fixed;
+  bottom: 20px;
+  right: 30px;
+  width: 40px;
+  height: 40px;
+  color: rgb(124, 117, 117);
+  background-color: rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  outline: none;
+  border: none;
+  border-radius: 25%;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+  transition-property: background, color;
+  transform: translateY(7px);
+  transition: 0.5s;
+}
+#back-to-top-btn:hover,
+#back-to-top-btn:focus {
+  background: 'transparent';
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  transform: translateY(-7px);
+  transition: 0.5s;
+}
+
 .container {
 
   position: relative;

diff --git a/scripts/contributors.js b/scripts/contributors.js
@@ -2,4 +2,5 @@ let contributors = document.querySelectorAll('.card-text a')
 contributors.forEach(con => {
     console.log(con.href)
     con.innerHTML += '<img style="width: 62px; margin-left: 12px" src="https://github.com/'+ con.href.split('https://github.com/')[1] + '.png?size=62">'
-})
+})
+