feat(scrollUP): add the scroll up feature

Added the scroll up feature to the site which helps to navigate the starting point of thee site. and added html structure for the feature in the index.html file,
styling in the assets/css/styles.css and for dynamic codes are added in the assets/js/main.js file.

assets/css/styles.css

@@ -475,99 +475,134 @@ img {
   overflow: hidden;
 }
 
-.footer__container{
+.footer__container {
   row-gap: 4rem;
 }
+
 .footer__logo {
   font-size: var(--h2-font-size);
   font-weight: var(--font-semi-bold);
   color: var(--first-color);
 }
+
 .footer__data {
   grid-template-columns: repeat(2, 1fr);
   row-gap: 4rem;
 }
+
 .footer__title {
   font-size: var(--h3-font-size);
   margin-bottom: 1rem;
 }
+
 .footer__links {
   display: grid;
   row-gap: 0.75rem;
 }
+
 .footer__link {
   color: var(--text-color);
   transition: color 0.4s;
 }
+
 .footer__link:hover {
   color: var(--first-color);
 }
+
 .footer__group {
   grid-column: 1/3;
 }
+
 .footer__form {
   display: grid;
   row-gap: 1rem;
   margin-bottom: 2rem;
 }
+
 .footer__input,
 .footer__button {
   font-size: var(--normal-font-size);
   font-family: var(--body-font);
   border: none;
   outline: none;
 }
+
 .footer__input {
   width: 100%;
   padding: 1.15rem 1.25rem;
   border-radius: 4rem;
   color: var(--text-color);
   background-color: var(--container-color);
 }
+
 .footer__input::placeholder {
   color: var(--text-color);
 }
+
 .footer__button {
   cursor: pointer;
 }
+
 .footer__social {
   display: flex;
   justify-content: center;
   column-gap: 1rem;
 }
+
 .footer__social-link {
   font-size: 1.25rem;
   color: var(--white-color);
   transition: color 0.4s;
 }
+
 .footer__social-link:hover {
-   color: var(--first-color);
+  color: var(--first-color);
 }
+
 .footer__copy {
   display: block;
   margin-top: 5rem;
   font-size: var(--small-font-size);
   text-align: center;
 }
+
 /*=============== SCROLL BAR ===============*/
 ::-webkit-scrollbar {
   width: 0.6rem;
   border-radius: 0.5rem;
   background-color: hsl(23, 4%, 15%);
 }
+
 ::-webkit-scrollbar-thumb {
   border-radius: 0.5rem;
   background-color: hsl(23, 4%, 30%);
 }
+
 ::-webkit-scrollbar-thumb:hover {
   background-color: hsl(23, 4%, 40%);
 }
 
 /*=============== SCROLL UP ===============*/
-
-
+.scroll__up {
+  position: fixed;
+  right: 1rem;
+  bottom: -50%;
+  display: inline-flex;
+  font-size: 1.25rem;
+  color: var(--white-color);
+  background: var(--gradient-color);
+  padding: 6px;
+  border-radius: 0.25rem;
+  z-index: var(--z-tooltip);
+  transition: bottom 0.4s, transform 0.4s;
+}
+.scroll__up:hover {
+  transform: translateY(-0.5rem);
+}
 /* Show Scroll Up */
-
+.show-scroll {
+  bottom: 3rem;
+}
 
 /*=============== BREAKPOINTS ===============*/
 /* For small devices */

assets/js/main.js

@@ -42,9 +42,14 @@ let swiperFavorite = new Swiper('.favorite__swiper', {
         }
     }
 })
-
 /*=============== SHOW SCROLL UP ===============*/
-
+const scrollUp = () => {
+    const scrollUp = document.getElementById('scroll-up')
+    // When the scroll is more than 350 viewport height, add the show-scroll class to a tag with the class scroll__up class
+    this.scrollY >= 350 ? scrollUp.classList.add('show-scroll')
+                        : scrollUp.classList.remove('show-scroll')
+}
+window.addEventListener('scroll', scrollUp)
 
 /*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
 

index.html

@@ -244,7 +244,9 @@ <h3 class="footer__title">Support</h3>
       </footer>
 
       <!--========== SCROLL UP ==========-->
-
+      <a class="scroll__up" id="scroll-up" href="">
+         <i class="ri-arrow-up-s-line"></i>
+      </a>
 
       <!--=============== SCROLLREVEAL ===============-->
       <script src=""></script>