Added a scroll to top button to the homepage

commonStyles.css

@@ -148,3 +148,14 @@ footer {
   text-align: center;
 }
 }
+
+
+#bttbutton{
+  position: fixed;
+    bottom: 20px;
+    right: 40px;
+    z-index: 9999;
+    border: none;
+    outline: none;
+    width: 55px;
+}

index.html

@@ -486,6 +486,15 @@ <h1 class="text-indigo-600 text-center mb-10 uppercase font-semibold">
           <!-- NewsLetter  -->
           <div
                class="mt-8 newsLetter text-slate-300 flex text-xs flex-col justify-center lg:flex-row lg:justify-between items-center">
+               <!-- Scroll to top -->
+               <div class="md:pr-8">
+
+                <button id="bttbutton" title="backtotop">
+                  <img src="image.svg" class="w-6 md:w-10 md:object-left"/>
+                </button>
+
+            </div>
+          <!-- Scroll to top -->
 
             <div class="mb-1 text-center lg:text-left w-1/2">
               <p class="capitalize text-[11px] font-semibold tracking-wider">Sign Up for our newsletter:</p>
@@ -617,7 +626,7 @@ <h1 class="text-3xl projectName">Moksh</h1>
 
     </div>
   </div>
-
+  <script src="./scrollUp.js"></script>
   <script src="./script.js"></script>
   <!-- Copyright Year js file -->
   <script src="./copyrightYear.js"></script>

scrollUp.js

@@ -0,0 +1,20 @@
+const topButton = document.getElementById("bttbutton");
+const contentWrapper = document.querySelector(".contentWrapper");
+
+function scrollUp() {
+  if (contentWrapper.scrollTop > 100) {
+    topButton.style.display = "block";
+  } else {
+    topButton.style.display = "none";
+  }
+}
+
+function getTop() {
+  contentWrapper.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+}
+
+contentWrapper.addEventListener("scroll", scrollUp);
+topButton.addEventListener("click", getTop);