search

Sayak-Bhunia / mystory

A new way to share stories anonymously.
https://mystorybuild.vercel.app
MIT License
28 stars 48 forks source link

Added 'Back-To-Top' Button on All Pages #245

Closed AsmitaMishra24 closed 2 weeks ago

AsmitaMishra24 commented 3 weeks ago

Issue Reference:

243

Description: Added a 'Back-To-Top' button across all pages to enhance user experience by allowing quick navigation to the top of the page. The button appears after the user scrolls down a specified amount and scrolls smoothly to the top when clicked.

Changes:

  1. Implemented a BackToTop Button for Home, About, Contributors, FAQs, Search, Advanced Search, Settings, Login, Signup, Confess, Privacy Policy, and Terms and Conditions pages.
  2. Implemented a BackToTop React component using useState and useEffect for state management and scroll detection.
  3. Integrated the react-scroll library for smooth scrolling.
  4. Added Font Awesome for the up arrow icon.
  5. Applied CSS for styling and transitions.

Details:

  1. The button becomes visible after scrolling 200px down.
  2. Smooth scrolling behavior with a duration of 500ms.
  3. Responsive and styled to match the site's design.

Screenshots: https://github.com/Sayak-Bhunia/mystory/assets/146121869/53268f75-d94c-411f-8e77-a2b0a26120b9

Testing:

  1. Verified on various pages to ensure consistent functionality.
  2. Tested across different browsers and screen sizes for compatibility.
vercel[bot] commented 3 weeks ago

@AsmitaMishra24 is attempting to deploy a commit to the sayakbhunia's projects Team on Vercel.

A member of the Team first needs to authorize it.

github-actions[bot] commented 3 weeks ago

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

AsmitaMishra24 commented 3 weeks ago

I've added a smooth scroll-activated "Back to Top" button on all pages. Please evaluate the feature and consider upgrading its level to Level 2 if it meets your expectations.