Scroll To Up

README.md

@@ -15,3 +15,4 @@ You Can Add This Add-ons To The Design
 - JavaScript Countdown => https://youtu.be/eFsiOTJrrE8
 - Animate Width On Scrolling => https://youtu.be/sbIoIKI9FOc
 - Increase Numbers On Scrolling => https://youtu.be/PLsUdgLnzgQ
+- Add Scroll To Up => https://youtu.be/9u1sj176W4o

css/elzero.css

@@ -1510,6 +1510,16 @@ ul {
   border-top: 1px solid #444;
 }
 /* End Footer */
+.arrow-up{
+  color: var(--main-color);
+  position: fixed;
+  right: 15px;
+  bottom: 20px;
+  font-size: 18px;
+  cursor: pointer;
+  transition: var(--main-transition);
+  animation: up-down-arrow .5s  infinite alternate ;
+}
 /* Start Animation */
 @keyframes up-and-down {
   0%,
@@ -1585,4 +1595,12 @@ ul {
     background-image: url("../imgs/discount-background2.jpg");
   }
 }
+@keyframes up-down-arrow {
+  from{
+    transform:  translateY(0);;
+  }
+  to{
+    transform: translateY(10px);
+  }
+}
 /* End Animation */

index.html

@@ -908,6 +908,7 @@ <h3>Elzero</h3>
       <p class="copyright">Made With &lt;3 By Elzero</p>
     </div>
     <!-- End Footer -->
+    <div class="arrow-up"><i class="fas fa-angle-double-up fa-2x"></i></div>
     <script src="js/main.js"></script>
   </body>
 </html>

js/main.js

@@ -75,3 +75,17 @@ function startCount(el) {
     }
   }, 2000 / goal);
 }
+let arrowUp = document.querySelector(".arrow-up");
+arrowUp.onclick = function () {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth"
+  })
+}
+window.onscroll = function(){
+  if (window.scrollY <= 664){
+    arrowUp.style.cssText ="display:none;";
+  }else{
+    arrowUp.style.cssText ="display:block;";
+  }
+}