Back to Top button

aslams2020 · Oct 2, 2024 · 157c2f4 · 157c2f4
1 parent 66a29f4
commit 157c2f4
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -100,6 +100,14 @@ <h2 class="text-center" >Contact</h2>
             &copy; Copyright <span id="year"></span>- All Rights Reserved
             -   Made With ❤️ by <span><a class="mygithub" href="https://github.com/aslams2020">Aslam Sayyad</a></span>
         </p>
+        <button id="BacktoTop">
+                <div class="circle1">
+                    <svg id="back-to-top" xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
+                        <path d="M16 8A8 8 0 1 0 0 8a8 8 0 0 0 16 0m-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707z"></path>
+                    </svg>
+                </div>
+        </button>
+
     </footer>
 
 
@@ -111,7 +119,26 @@ <h2 class="text-center" >Contact</h2>
             document.getElementById('progress-bar').style.width = scrolled + '%';
         });
 
+        /* Back to Top Button */
+        const scrollToTopBtn = document.getElementById("BacktoTop");
+        window.onscroll = function() {
+            scrollFunction();
+        };
+
+        function scrollFunction() {
+            if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
+                scrollToTopBtn.style.display = 'block'; // Show button
+            } else {
+                scrollToTopBtn.style.display = 'none'; // Hide button
+            }
+        }
+
+        scrollToTopBtn.addEventListener("click", function() {
+            // Smooth scroll back to top
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        });
     </script>
+
     <script src="/Js/script.js"></script>
 
 </body>

diff --git a/style.css b/style.css
@@ -518,3 +518,45 @@ html{
   color:rgb(247, 242, 242);
   text-decoration: underline;
 }
+/* Back to Top button style */
+#BacktoTop {
+  display: none; /* Initially hide the button */
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 55px;  
+  height: 55px; 
+  background-color: rgb(170, 5,5); 
+  border-radius: 50%;
+  border: none;
+  cursor: pointer;
+  text-align: center;
+  line-height: 50px; 
+  font-size: 24px;  
+  z-index: 1000;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  box-shadow: 0 0 0 2px #FFF, 0 0 0 3px #262626, 0 0 6px 2px rgba(255, 255, 255, 0.2); /* Adjusted outer rings */
+  overflow: hidden;
+}
+
+.circle1 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#BacktoTop:hover {
+  background-color: rgb(106, 12, 11); /* Darker shade on hover */
+  transform: scale(1.1); /* Slight zoom effect on hover */
+
+}
+#BacktoTop svg {
+  fill: #b4a933; 
+  transition: fill 0.3s ease-in-out;
+}
+
+#BacktoTop:hover svg {
+  fill: #ffd700; 
+}
+
+