-
Notifications
You must be signed in to change notification settings - Fork 108
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add scroll to top feature #296
Comments
Please assign this issue to me as well under the gssoc-ext, hacktoberfest-accepted and level labels? @GarimaSingh0109 |
GarimaSingh0109
added a commit
that referenced
this issue
Oct 20, 2024
<!-- Thank you for sending a pull request ❤️ --> ## 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. <!-- We're looking forward to merging your contribution!! --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## 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. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Description: We can implement a "Scroll to Top" button that allows users to quickly navigate back to the top of the page, enhancing user experience for long pages.
Requirements:
1 A button/icon that appears once the user scrolls down a certain distance.
2 Button should be fixed at the bottom-right corner of the screen.
3 When clicked, the page should smoothly scroll to the top.
4 Ensure the button is hidden when the user is near the top of the page.
5 The button design should match the website’s style and be mobile-friendly.
Design Considerations:
Tasks:
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.
@GarimaSingh0109 can you please assign this issue to me under the gssoc-ext, hacktoberfest-accepted and level labels?
The text was updated successfully, but these errors were encountered: