Merge pull request #57 from NsCracker/feat/8-Scroll-to-Top/Bottom

Scroll to Top/Bottom

index.html

@@ -77,7 +77,12 @@
 
 
     <main>
-
+        <div id="progressup" class="scroll-progress">
+            <span id="progressup-value">&#x1F815;</span>
+        </div>
+        <div id="progressdown" class="scroll-progress">
+            <span id="progressdown-value">&#x1F817;</span>
+        </div>                    
         <div class="carouselContainer">
             <div class="swiper">
 

scrollEffect.js

@@ -18,8 +18,56 @@ const animationAppear = new IntersectionObserver(function (
     }
   });
 },
-Options);
+  Options);
 
 cards.forEach((card) => {
   animationAppear.observe(card);
 });
+
+let calcScrollValue = () => {
+  let scrollProgressup = document.getElementById("progressup");
+  let scrollProgressdown = document.getElementById("progressdown");
+
+  let pos = document.documentElement.scrollTop;
+  let calcHeight =
+    document.documentElement.scrollHeight -
+    document.documentElement.clientHeight;
+  let scrollValue = Math.round((pos * 100) / calcHeight);
+
+  if (pos > 0) {
+    scrollProgressup.style.display = "grid";
+    scrollProgressup.style.background = `conic-gradient(#03cc65 ${scrollValue}%, #d7d7d7 ${scrollValue}%)`;
+  } else {
+    scrollProgressup.style.display = "none";
+  }
+
+  if (pos < calcHeight - window.innerHeight) {
+    scrollProgressdown.style.display = "grid";
+    scrollProgressdown.style.background = `conic-gradient(#03cc65 ${scrollValue}%, #d7d7d7 ${scrollValue}%)`;
+  } else {
+    scrollProgressdown.style.display = "none";
+  }
+};
+
+let scrollToTop = () => {
+  document.documentElement.scrollTop = 0;
+};
+
+let scrollToBottom = () => {
+  let scrollHeight =
+    document.documentElement.scrollHeight -
+    document.documentElement.clientHeight;
+  document.documentElement.scrollTop = scrollHeight;
+};
+
+let scrollProgressup = document.getElementById("progressup");
+let scrollProgressdown = document.getElementById("progressdown");
+
+scrollProgressup.addEventListener("click", scrollToTop);
+scrollProgressdown.addEventListener("click", scrollToBottom);
+
+window.onscroll = () => {
+  requestAnimationFrame(calcScrollValue);
+};
+
+window.onload = calcScrollValue;

styles.css

@@ -1083,41 +1083,44 @@ section,
 
 
 /*search bar style start*/
-#search-container{
+#search-container {
   position: absolute;
   z-index: 1000;
   display: none;
   cursor: pointer;
-  
+
 }
 
 
-#search-div{
-  width: 100%; 
+#search-div {
+  width: 100%;
   height: 40px;
   background-color: rgb(235, 235, 235);
-  margin-top: 1px; 
+  margin-top: 1px;
   display: flex;
   border: 1px solid black;
   border-radius: 10px;
 }
-#search-div:hover{
+
+#search-div:hover {
   background-color: rgb(235, 235, 235);
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 
 }
 
-#search-img1{
+#search-img1 {
   width: 11%;
   height: 38px;
   border: 0;
   border-radius: 10px;
-  
+
 }
-#search-text{
+
+#search-text {
   margin-top: 8px;
   margin-left: 4px;
 }
+
 /*search bar style end*/
 
 /* Adjusted the font size of All Anime Characters for small screen size */
@@ -1260,3 +1263,56 @@ input.nosubmit {
   background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 13px center;
 }
 
+
+html {
+  scroll-behavior: smooth;
+}
+
+#progressup-value {
+  display: block;
+  height: calc(100% - 15px);
+  width: calc(100% - 15px);
+  background-color: #ffffff;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 35px;
+  color: #001a2e;
+}
+
+#progressdown-value {
+  display: block;
+  height: calc(100% - 15px);
+  width: calc(100% - 15px);
+  background-color: #ffffff;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 35px;
+  color: #001a2e;
+}
+
+.scroll-progress {
+  position: fixed;
+  bottom: 20px;
+  right: 10px;
+  height: 70px;
+  width: 70px;
+  display: none;
+  place-items: center;
+  border-radius: 50%;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  cursor: pointer;
+}
+
+.scroll-progress-value {
+  display: block;
+  height: calc(100% - 15px);
+  width: calc(100% - 15px);
+  background-color: #ffffff;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 35px;
+  color: #001a2e;
+}