Added scroll to top feature (#365)

## Issues Identification Closes: #296 ## Description Implemented a "Scroll to Top" button that allows users to quickly navigate back to the top of the page, enhancing user experience for long pages. ### Details Include any detailed information about the changes in this pull request. Design Considerations: - Ensure mobile responsiveness and accessibility. - Use a smooth scrolling animation. - Consider the size, visibility, and contrast of the button for better UX. Tasks performed: 1 Design the "Scroll to Top" button (icon, size, color). 2 Implement the button in HTML/CSS. 3 Add JavaScript for the smooth scroll functionality. 4 Set the button to appear only when the user scrolls down (e.g., 200px from the top). 5 Test the feature across different devices and browsers. 6 Ensure the feature does not interfere with other elements on the page. ## Types of Changes _Please check the boxes that apply_ - [ ] Bugfix (non-breaking change that fixes an issue) - [x] New feature (non-breaking change that adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [ ] Documentation update (Documentation content changed) - [ ] Other (please describe): ## Checklist _Please check the boxes that apply_ - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] My changes do not break the current system and pass all existing test cases - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules ## Screenshots https://github.com/user-attachments/assets/44f1113c-3f90-472e-a561-30dc7d116190 If applicable, please attach screenshots of the changes made to the user interface. ## Additional Information Please provide any other information that is relevant to this pull request.   ## Summary by CodeRabbit - **New Features** - Introduced a "Scroll to Top" button for improved navigation. - The button appears based on user scrolling behavior and allows users to quickly return to the top of the page. - **Style** - Added styles for the new button, including visibility, positioning, and mobile responsiveness.
GarimaSingh0109 · Oct 20, 2024 · 388d133 · 388d133
2 parents 1c35230 + 66d8843
commit 388d133
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -13,7 +13,42 @@
     <!-- CSS CDN For Smooth Scrolling -->
     <link rel="stylesheet" href="https://unpkg.com/lenis@1.1.14/dist/lenis.css">
     <script src="https://unpkg.com/boxicons@2.1.4/dist/boxicons.js"></script>
+    <style>
+      /* Scroll to Top Button  style*/
+      #scrollToTopBtn {
+        display: none; /* Hidden by default */
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        z-index: 1000; 
+        background-color: #007bff; 
+        color: white;
+        border: none;
+        padding: 20px;
+        border-radius: 50%; /* Circular shape */
+        font-size: 30px;
+        cursor: pointer;
+        transition: opacity 0.3s ease-in-out; /* Smooth transition */
+        opacity: 0.7;
+      }
+
+      #scrollToTopBtn:hover {
+        opacity: 1; /* Full opacity on hover */
+      }
+
+      /* Mobile Responsive */
+      @media screen and (max-width: 600px) {
+        #scrollToTopBtn {
+          padding: 10px;
+          font-size: 14px;
+          bottom: 15px;
+          right: 15px;
+        }
+      }
+
+    </style>
   </head>
+
   <body>
 </head>
 
@@ -415,6 +450,10 @@ <h4>Responsibility</h4>
           </section>
         </div>
       </section>
+
+    <!-- Scroll to Top Button -->
+    <button id="scrollToTopBtn" title="Go to top">↑</button>  
+
     </main>
     <footer id="footer">
       <h2>Stay Connected</h2>
@@ -445,13 +484,13 @@ <h3>Our Commitment to Sustainability</h3>
           >
             <path
               d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
-            ></path></svg
-        ></a>
+            ></path></svg></a>
         <a href="#"></a>
       </div>
       <p>© 2024 Waste Management. All rights reserved.</p>
     </footer>
     <script src="https://unpkg.com/lenis@1.1.14/dist/lenis.min.js"></script>
     <script src="script.js"></script>
+    <script src="scroll.js"></script>
   </body>
 </html>
diff --git a/scroll.js b/scroll.js
@@ -0,0 +1,19 @@
+// Get the button element
+const scrollToTopBtn = document.getElementById('scrollToTopBtn');
+
+// Show the button when scrolled down 200px
+window.onscroll = function() {
+  if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
+    scrollToTopBtn.style.display = "block";
+  } else {
+    scrollToTopBtn.style.display = "none";
+  }
+};
+
+// Smooth scroll to the top when the button is clicked
+scrollToTopBtn.addEventListener('click', function() {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth' 
+  });
+});