feat: Added a back to top button feature #1780
Closed
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@imrehankhan is attempting to deploy a commit to the Piyush Garg's projects Team on Vercel. A member of the Team first needs to authorize it. |
imrehankhan
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixed issue #748
Description:
This PR introduces a “Back to Top” button to enhance user navigation and improve accessibility on the website. The button appears when the user scrolls down the page and allows them to return to the top with a smooth scrolling animation.
Changes Made:
1. Created a reusable BackToTop component.
2. Added functionality to detect scroll position and conditionally render the button.
3. Implemented smooth scrolling behaviour for better user experience.
4. Styled the button for consistency with the website’s design.
Files Added/Modified:
• components/BackToTop/back.jsx
• components/BackToTop/back.css
Preview:
• The button is visible when the user scrolls down by 200px or more.
• Smooth scrolling effect is implemented for modern browsers.
Testing Instructions:
1. Scroll down the page to see the “Back to Top” button appear.
2. Click the button to ensure it scrolls smoothly to the top.
3. Verify that the button is hidden when scrolled back to the top.
Additional Notes:
• The component is modular and can be reused across pages.
• Added responsive styles to ensure proper rendering on all screen sizes.
Screenshot:
