Merge pull request #1727 from Ashish-Patnaik/scroll-btn

fixed scroll btn

contact_us.html

@@ -539,10 +539,7 @@ <h1 class="fade-in" style="font-size: 48px; margin-bottom: 20px; color: var(--te
         Send
     </button>
 
-    </form>
-    <div id="backToTop" title="Back to Top">
-      <i class="fas fa-arrow-up"></i>
-    </div>
+
 
   </div>
 </div>
@@ -572,6 +569,11 @@ <h1 class="fade-in" style="font-size: 48px; margin-bottom: 20px; color: var(--te
   }
 </style>
 
+</form>
+<div id="backToTop" title="Back to Top">
+  <i class="fas fa-arrow-up"></i>
+</div>
+
 <!-- footer -->
 <footer id="footer">
   <div class="footer-container">

give_feedback.html

@@ -442,6 +442,10 @@ <h2 class="text-center">Signup</h2>
       </header>
     </div>
   </nav1>
+  </form>
+  <div id="backToTop" title="Back to Top">
+    <i class="fas fa-arrow-up"></i>
+  </div>
 
 
 

index.html

@@ -677,6 +677,10 @@ <h2>Forgot Password</h2>
         </div>
 
     </nav>
+    </form>
+    <div id="backToTop" title="Back to Top">
+    <i class="fas fa-arrow-up"></i>
+    </div>
 
     <!-- JavaScript for Hamburger Menu Toggle -->
     <script>

start_writing.css

@@ -254,6 +254,7 @@ textarea#blogContent::placeholder {
   color: #6c757d;
 }
 
+
 .footer-tags, .footer-social {
   margin-top: 10px;
 }

start_writing.html

@@ -102,11 +102,8 @@ <h2>WordWise</h2>
               <li><a href="#login" onclick="openForm('login')">Login</a></li>
               <li><a href="#signup" onclick="openForm('signup')">Signup</a></li>
           </ul>
-      </div>
-
-
+        </div>
 
-
     <!--  Login Form -->
   <div class="form-popup" id="loginForm">
     <form class="form-container" onsubmit="return validateLoginForm()" style="max-width: 400px; margin: auto;">
@@ -133,7 +130,6 @@ <h2 class="text-center">Login</h2>
     </form>
   </div>
 
-
   <!-- Signup Form -->
   <div class="form-popup" id="signupForm">
     <form class="form-container" onsubmit="return validateSignupForm()" style="max-width: 400px; margin: auto;">
@@ -167,7 +163,7 @@ <h2 class="text-center">Signup</h2>
           Sign in with Google</button>
     </form>
   </div>
-  
+
   <!-- Forgot Password Modal -->
   <div id="forgot-password-modal" class="modal">
     <div class="form-container modal-content">
@@ -344,9 +340,7 @@ <h2>Forgot Password</h2>
         }
     }
   </script>
-
-
-
+
           <div class="theme-switch-wrapper">
             <label class="theme-switch" for="checkbox">
               <input type="checkbox" id="checkbox" />
@@ -451,7 +445,11 @@ <h4>Suggestions:</h4>
       </div>
     </main>
 
-    <button id="backToTop">⬆️</button>
+    <!-- <button id="backTotop ">⬆️</button>  -->
+    </form>
+    <div id="backToTop " title="Back to Top">
+      <i class="fas fa-arrow-up"></i>
+    </div> 
 
     <!-- main -->
 
@@ -591,6 +589,8 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
           </div>
       </div>
   </div>
+
+
   <!-- the authentication copyright -->
   <div class="wordwise-footer">
       <div class="wordwise-footer-content">
@@ -792,12 +792,10 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
 <script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
 <script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>
 <script src="script.js"></script>
-<div id="back-to-top" class="back-to-top">
-  <i class="fas fa-chevron-up"></i>
-</div>
+
 
 <style>
-  .back-to-top {
+  #backtoTop {
     position: fixed;
     bottom: 20px;
     right: 20px;
@@ -816,10 +814,12 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
     visibility: hidden;
   }
 
-  .back-to-top.show {
+  #back-to-top.show {
     opacity: 1;
     visibility: visible;
   }
+
+
 </style>
 
 <script>
@@ -842,5 +842,8 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
 </script>
 
 
+
+
+
   </body>
 </html>

style.css

@@ -555,7 +555,7 @@ background: var(--light);
 }
 #backToTop {
   position: fixed;
-  bottom: 30px;
+  bottom: 80px;
   right: 10px;
   width: 60px;
   height: 60px;