Added "back to top" to all pages where it was missing

Sujal1201 · Oct 20, 2024 · 2249e7a · 2249e7a
1 parent c0981b5
commit 2249e7a
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 23 deletions.
diff --git a/Blog_page.html b/Blog_page.html
@@ -249,7 +249,11 @@ <h2>Exploring creative fields</h2>
       </div>
       <span>Creative Canvas Blog Page</span>
     </footer>
-
+     <!-- Back to Top Button -->
+     <button id="BacktoTop">
+      <span>↑</span>
+    </button>
+    <script src="src/Scripts/BacktoTop.js"></script>
     <script>
       // Coordinates for the cursor
       const coords = { x: 0, y: 0 };

diff --git a/about-us.html b/about-us.html
@@ -257,7 +257,13 @@ <h3 class="mb-4">Join Our Community</h3>
           | All rights reserved © 2024
         </p>
       </div>
+      <!-- Back to Top Button -->
+      <button id="BacktoTop">
+        <span>↑</span>
+      </button>
+
     </section>
+    <script src="src/Scripts/BacktoTop.js"></script>
     <script>
       var typed = new Typed("#site-name", {
         strings: ["Canvas Editor", "Build and shine!"],

diff --git a/index.html b/index.html
@@ -840,27 +840,7 @@ <h3>Thank You!</h3>
         </section>
 
         <script src="src\Scripts\preloader.js"></script>
-        <script>
-            const scrollToTopBtn = document.getElementById("BacktoTop");
-            window.onscroll = function () {
-                scrollFunction();
-            };
-
-            function scrollFunction() {
-                if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
-                    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 src="src/Scripts/BacktoTop.js"></script>
 
         <script>
             document.addEventListener('DOMContentLoaded', function () {

diff --git a/privacy.html b/privacy.html
@@ -284,7 +284,11 @@ <h3 class="mb-4">Join Our Community</h3>
           | All rights reserved © 2024
         </p>
       </div>
+      <button id="BacktoTop">
+        <span>↑</span>
+      </button>
     </section>
+    <script src="src/Scripts/BacktoTop.js"></script>
     <script>
       var typed = new Typed("#site-name", {
         strings: ["Canvas Editor", "Build and shine!"],

diff --git a/review.html b/review.html
@@ -94,6 +94,31 @@
 	background: #1c47e3;    
 	border: 5px double;    
 }
+/* Back to Top Button */
+#BacktoTop {
+  position: fixed; /* Stay in fixed position */
+  bottom: 50px; /* Positioned above the chatbot */
+  right: 5px; /* Aligned to the right */
+  width: 55px;
+  height: 55px;
+  background-color: #007bff; /* Button background */
+  color: white; /* Text color */
+  padding: 10px 15px; /* Padding for button size */
+  border-radius: 50%; /* Circular button */
+  border: none;
+  font-size: 24px; /* Size of the text or arrow */
+  font-weight: bolder;
+  display: block; /* Initially hidden */
+  visibility: hidden;
+  z-index: 1000; /* Ensures it is above most elements */
+  cursor: pointer; /* Pointer when hovered */
+}
+
+#BacktoTop:hover {
+  background-color: #0056b3; /* Change to a lighter blue on hover */
+  transform: scale(1.1);
+}
+
 </style>
 <style>
 	/* Circle styles */
@@ -354,7 +379,11 @@ <h5>Text <i class="fa-solid fa-text-width"></i></h5>
         </div>
         <!-- Copyright -->
       </footer>
+	  <button id="BacktoTop">
+        <span>↑</span>
+      </button>
 </div>
+<script src="src/Scripts/BacktoTop.js"></script>
 <script>
 	// Coordinates for the cursor
 	const coords = { x: 0, y: 0 };

diff --git a/src/Scripts/BacktoTop.js b/src/Scripts/BacktoTop.js
@@ -0,0 +1,19 @@
+const scrollToTopBtn = document.getElementById("BacktoTop");
+window.onscroll = function () {
+    scrollFunction();
+};
+
+function scrollFunction() {
+    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+        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' });
+});
diff --git a/src/Styles/Style_Blog_page.css b/src/Styles/Style_Blog_page.css
@@ -300,6 +300,32 @@ footer{
     letter-spacing: 2px;
 }
 
+/* Back to Top Button */
+#BacktoTop {
+    position: fixed; /* Stay in fixed position */
+    bottom: 50px; /* Positioned above the chatbot */
+    right: 5px; /* Aligned to the right */
+    width: 55px;
+    height: 55px;
+    background-color: #007bff; /* Button background */
+    color: white; /* Text color */
+    padding: 10px 15px; /* Padding for button size */
+    border-radius: 50%; /* Circular button */
+    border: none;
+    font-size: 24px; /* Size of the text or arrow */
+    font-weight: bolder;
+    display: block; /* Initially hidden */
+    visibility: hidden;
+    z-index: 1000; /* Ensures it is above most elements */
+    cursor: pointer; /* Pointer when hovered */
+  }
+
+  #BacktoTop:hover {
+    background-color: #0056b3; /* Change to a lighter blue on hover */
+    transform: scale(1.1);
+  }
+
+
 /* Media Queries */
 @media screen and (min-width: 540px){
     .navbar-nav a{

diff --git a/testimonial.html b/testimonial.html
@@ -159,6 +159,31 @@
         header {
             position: relative;  /* Add this to ensure proper positioning of the home button */
         }
+        /* Back to Top Button */
+#BacktoTop {
+  position: fixed; /* Stay in fixed position */
+  bottom: 50px; /* Positioned above the chatbot */
+  right: 5px; /* Aligned to the right */
+  width: 55px;
+  height: 55px;
+  background-color: #007bff; /* Button background */
+  color: white; /* Text color */
+  padding: 10px 15px; /* Padding for button size */
+  border-radius: 50%; /* Circular button */
+  border: none;
+  font-size: 24px; /* Size of the text or arrow */
+  font-weight: bolder;
+  display: block; /* Initially hidden */
+  visibility: hidden;
+  z-index: 1000; /* Ensures it is above most elements */
+  cursor: pointer; /* Pointer when hovered */
+}
+
+#BacktoTop:hover {
+  background-color: #0056b3; /* Change to a lighter blue on hover */
+  transform: scale(1.1);
+}
+
     </style>
 </head>
 <body>
@@ -286,13 +311,19 @@ <h3>Endless Customization</h3>
                     <p>Flexible tools that allow you to bring your unique vision to life.</p>
                 </div>
             </div>
-        </section>
+        <!-- Back to Top Button -->
+       <button id="BacktoTop">
+        <span>↑</span>
+      </button>
+    </section>
 
         <div class="cta">
             <h2>Ready to unleash your creativity?</h2>
             <p>Join thousands of satisfied users and start designing today!</p> 
             <a href="index.html#mainCanvas" class="cta-button">Start Drawing Now ➡ </a>
         </div>
     </div>
+
+    <script src="src/Scripts/BacktoTop.js"></script>
 </body>
 </html>