Add Scroll-to-Top Button for Improved Navigation

[ak-0283]

Description:

This pull request introduces a scroll-to-top button to the website, enhancing user navigation by allowing them to quickly return to the top of the page. This feature improves the overall user experience, especially on pages with extensive content.

Features to be Added:

1. Scroll-to-Top Button:

   • A floating button will appear when the user scrolls down the page.
   • Clicking the button will smoothly scroll the user back to the top.

2. Design and Placement:

   • The button will be styled to align with the website's theme (e.g., matching colors, fonts, and icons).
   • Positioned unobtrusively in the bottom-right corner of the page to avoid overlapping with other elements.

3. Smooth Scrolling Animation:

   • Implement a smooth scrolling effect for a visually appealing transition.

4. Responsive Behavior:

   • Ensure the button is responsive and works seamlessly across different screen sizes and devices.

5. Visibility Conditions:

   • The button will only appear after the user has scrolled a certain distance down the page.
   • The button will hide when the user is at the top of the page to avoid redundancy.

6. Accessibility Features:

   • Add ARIA labels for screen readers to improve accessibility.
   • Ensure the button is keyboard-navigable for better usability.

Benefits:

• Enhances website navigation, especially for users viewing long pages.
• Improves the overall user experience with easy and quick access to the top of the page.
• Adds a modern, user-friendly feature that aligns with current web design trends.

Testing and Validation:

• Verify that the button appears only when the user scrolls down the page and disappears at the top.
• Test the smooth scrolling functionality on various devices and browsers.
• Ensure the button does not overlap with other page elements.
• Check responsiveness and accessibility compliance.

Preview

[github-actions]

Hi there! Thanks for opening this issue @ak-0283!. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible.If belong's to SWOC program role ur self as Contributor in OS lead site Link : https://www.oslead.xyz/usertype , so that ur points will be assigned to the leaderboard.

[ak-0283]

Please review and assign it to me. @Anjaliavv51