Merge pull request #108 from saadgibawa/footer

Back to Top button
aslams2020 · Oct 3, 2024 · df68b9e · df68b9e
2 parents 10694f2 + e515276
commit df68b9e
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -106,9 +106,41 @@ <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>
 
+<script>
+    /* 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.visibility = 'visible';
+            scrollToTopBtn.style.opacity = '1';
+        } else {
+            scrollToTopBtn.style.visibility = 'hidden';
+            scrollToTopBtn.style.opacity = '0';
+        }
+    }
 
+    scrollToTopBtn.addEventListener("click", function() {
+        // Smooth scroll back to top
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+
+</script>
+
+
     <script>
             window.addEventListener('scroll', function() {
             const winScroll = document.body.scrollTop || document.documentElement.scrollTop;

diff --git a/style.css b/style.css
@@ -524,3 +524,48 @@ html{
   color:rgb(247, 242, 242);
   text-decoration: underline;
 }
+/* Back to Top button style */
+#BacktoTop {
+  display: block; /* Ensure the button is part of the layout */
+  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;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 1.5s, visibility 1.5s, 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; 
+}
+
+
+