Skip to content
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

feat(ui): add scroll to top button #586

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

Robinaditya1045
Copy link

Description

  • Added a "Scroll to Top" button to improve navigation for users on long pages.
  • The button becomes visible after the user scrolls down by 700px, making it easy to return to the top of the page with a single click.
  • Styled the button to ensure it is easily visible and works responsively on various devices.

Related Issue(s)

Fixes #475

Testing

  • Ensured the button appears after scrolling down 700px.
  • Verified that clicking the button smoothly scrolls the page back to the top.
  • Tested the feature across different browsers to ensure consistent behavior.

Screenshots

Screenshot from 2025-03-09 02-25-51

Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

Copy link

netlify bot commented Mar 8, 2025

Deploy Preview for peaceful-ramanujan-288045 ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 6c57097
🔍 Latest deploy log https://app.netlify.com/sites/peaceful-ramanujan-288045/deploys/67d7384e699dca0008c17f30
😎 Deploy Preview https://deploy-preview-586--peaceful-ramanujan-288045.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Member

@AceTheCreator AceTheCreator left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work, @Robinaditya1045!

A couple of suggestions:

The arrow could use a smoother transition when it appears for a better visual effect.
Its position seems too far off the screen, bringing it slightly toward the top and left would improve its placement.

@AceTheCreator
Copy link
Member

@Robinaditya1045 maybe you lean towards this PR approach to the button style

@Robinaditya1045
Copy link
Author

Nice work, @Robinaditya1045!

A couple of suggestions:

The arrow could use a smoother transition when it appears for a better visual effect.
Its position seems too far off the screen, bringing it slightly toward the top and left would improve its placement.

Sure, will work on the changes.

@Robinaditya1045
Copy link
Author

@Robinaditya1045 maybe you lean towards this PR approach to the button style

Kinda, yes.

@Robinaditya1045
Copy link
Author

@AceTheCreator, I have committed the suggested changes. Please review

@AceTheCreator
Copy link
Member

@AceTheCreator, I have committed the suggested changes. Please review

I think we should lean towards using this type of arrow up icon https://www.svgrepo.com/svg/93813/up-arrow

@AceTheCreator
Copy link
Member

Also the positioning on mobile resolution is a little bit disturbing 🤔

I think it should be placed toward the bottom right corner

@Robinaditya1045
Copy link
Author

Hey @AceTheCreator, I have fixed the mobile responsiveness thing. Please review it. If this works, then I will move forward and clean the commit history

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Return to top arrow feature/button
2 participants