From 96bba99ee74a3656198b68774dec255d9fa6ae66 Mon Sep 17 00:00:00 2001
From: Disha <smilesniyati@gmail.com>
Date: Tue, 8 Oct 2024 20:32:08 +0530
Subject: [PATCH] added scroll to top button to all the pages

---
 about-us.html |  4 ++++
 index.html    |  7 ++++---
 project.html  |  4 ++++
 script.js     | 23 ++++++++++++++++++++++-
 style.css     | 31 +++++++++++++++++++++++++++++++
 5 files changed, 65 insertions(+), 4 deletions(-)

diff --git a/about-us.html b/about-us.html
index 296d1f5..98abcc9 100644
--- a/about-us.html
+++ b/about-us.html
@@ -126,6 +126,10 @@ <h2 class="section-title">Contact Us</h2>
 
     <div class="line"><br /></div>
 
+    <button id="backToTopBtn" title="Go to top"><i class="fa-solid fa-arrow-up"></i>
+    </button>
+  <script src="script.js"></script>
+
     <footer class="footer">
       <ul class="social-icon">
         <li class="social-icon__item">
diff --git a/index.html b/index.html
index a2738d1..f043af1 100644
--- a/index.html
+++ b/index.html
@@ -965,12 +965,13 @@ <h3 class="name">Harrish M</h3>
                 <a href="https://www.instagram.com/h4ri_ig/" target="_blank"><i class="fa-brands fa-instagram"></i></a>
         </div>
     </div>
-    
-
-
         <!--Profiles-->
     </div>
 
+    <button id="backToTopBtn" title="Go to top"><i class="fa-solid fa-arrow-up"></i>
+    </button>
+  <script src="script.js"></script>
+
     <footer class="footer">
         <ul class="social-icon">
           <li class="social-icon__item"><a class="social-icon__link" href="https://m.facebook.com/profile.php?eav=AfaQiAnLMKoJt9fhAP0mpclv59dhzAMBnCy-rfJi2qawDv01IOkuI4RSxLQFG4508J0&paipv=0">
diff --git a/project.html b/project.html
index cdfc424..bcd52cd 100644
--- a/project.html
+++ b/project.html
@@ -473,6 +473,10 @@ <h3 class="name">Ashish</h3>
         <!-- project  -->
     </div>
 
+    <button id="backToTopBtn" title="Go to top"><i class="fa-solid fa-arrow-up"></i>
+    </button>
+  <script src="script.js"></script>
+
 <footer class="footer">
     <ul class="social-icon">
       <li class="social-icon__item"><a class="social-icon__link" href="https://m.facebook.com/profile.php?eav=AfaQiAnLMKoJt9fhAP0mpclv59dhzAMBnCy-rfJi2qawDv01IOkuI4RSxLQFG4508J0&paipv=0">
diff --git a/script.js b/script.js
index 6a1bb57..d5ddb61 100644
--- a/script.js
+++ b/script.js
@@ -45,4 +45,25 @@ darkMode.addEventListener("click", () => {
     button.classList.toggle('bg-color');
     });
 });
-});
\ No newline at end of file
+});
+
+// Get the button
+let backToTopBtn = document.getElementById("backToTopBtn");
+
+// Show the button when the user scrolls down 20px from the top of the document
+window.onscroll = function() {
+  scrollFunction();
+};
+
+function scrollFunction() {
+  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+    backToTopBtn.style.display = "block";
+  } else {
+    backToTopBtn.style.display = "none";
+  }
+}
+
+// When the user clicks the button, scroll to the top of the document
+backToTopBtn.onclick = function() {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+};
\ No newline at end of file
diff --git a/style.css b/style.css
index 3186831..aaf3138 100644
--- a/style.css
+++ b/style.css
@@ -520,6 +520,37 @@ footer {
   color: black; /* Change text color to black on hover */
 }
 
+#backToTopBtn i {
+  font-size: 24px;
+}
+
+#backToTopBtn {
+    display: none; /* Hidden by default */
+    position: fixed;
+    bottom: 20px;
+    right: 30px;
+    z-index: 99;
+    font-size: 18px;
+    background-color: #444;
+    color: white;
+    border: none;
+    padding: 15px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    border-radius: 50%;
+    box-shadow: 5px 0px 10px 0px rgba(227, 86, 5, 0.838),-0.1em 0 0.4em rgba(227, 86, 5, 0.838);
+    transition: transform ease 0.5s, box-shadow ease 0.5s;
+  
+  }
+  
+  /* Button hover effect */
+  #backToTopBtn:hover {
+    background-color: #333;
+    transform: translateY(-5px);
+    box-shadow: 1px 10px 20px 2px rgba(227, 86, 5, 0.415);
+  }
+
 /* Footer for About Page */
 .about-footer {
   background-color: var(