Merge pull request #33 from PiyushK79/main

Added back to top button
Hackerspace2023 · Oct 12, 2023 · 31d3079 · 31d3079
2 parents a97dafa + ca6dce7
commit 31d3079
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 4 deletions.
diff --git a/css/footer.css b/css/footer.css
@@ -12,7 +12,7 @@
     flex-direction: column;
     padding: 20px;
     gap: 20px;
-    margin-top: 80px;
+    margin-top: 50px;
 }
 .footer h1{
     color: var(--gray);

diff --git a/css/style.css b/css/style.css
@@ -87,4 +87,20 @@ main{
 }
 #change-theme:hover{
     background-color: transparent;
+}
+
+.back-to-top{
+    margin-top: 30px;
+    margin-left: 50%;
+    width:0px;
+    height: 0px;
+    background: transparent;
+    cursor: pointer;
+}
+
+.top-btn{
+    transform: rotate(180deg);
+    width: 35px;
+    height: 35px;
+    transition: all 0.5s ease-in;
 }
diff --git a/index.html b/index.html
@@ -187,6 +187,13 @@ <h1>Photo <b>Gallery</b></h1>
 
         </div>
       </div>
+      <button onclick="document.body.scrollTop=0;
+      document.documentElement.scrollTop=0;
+      event.preventDefault()" 
+      class="back-to-top"><span>
+        <img class="top-btn" src="./public/Backtotop.png" alt="">
+          </span>
+      </button>
     </div>
     <!-- footer section -->
 

diff --git a/js/photo-gallery.js b/js/photo-gallery.js
@@ -50,6 +50,4 @@ right.addEventListener("click", ()=>{
   photogallery.scrollLeft += photogallery.clientWidth/2;
   console.log(j);
 
-})
-
-
+})
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/Backtotop.png b/public/Backtotop.png
-Original file line number
+Diff line change
@@ Expand Up / @@ -50,6 +50,4 @@ right.addEventListener("click", ()=>{ @@
       photogallery.scrollLeft += photogallery.clientWidth/2;
       console.log(j);
-    })
+    })