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: return to top arrow feature/button #516

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

Conversation

anmolgupta2015
Copy link

This PR introduces a ScrollToTop button to improve user navigation across the application. The button becomes visible when the user scrolls down beyond 300px and enables smooth scrolling back to the top when clicked.

Key Changes

  1. ScrollToTop Component:

    • Added a new reusable component to handle the scroll-to-top functionality.
    • Integrated smooth scrolling for enhanced user experience.
  2. Integration in _app.js:

    • Imported the ScrollToTop component into the global _app.js file to ensure it is available on all pages.
    • Positioned the button between the main content and the footer for seamless integration.

Testing

  • Verified that the button appears only after scrolling down.
  • Tested the smooth scroll functionality across all pages.

Related Issue

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 Jan 14, 2025

Deploy Preview for peaceful-ramanujan-288045 ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 7499b93
🔍 Latest deploy log https://app.netlify.com/sites/peaceful-ramanujan-288045/deploys/67891e6b88960400078328fa
😎 Deploy Preview https://deploy-preview-516--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.

@anmolgupta2015 anmolgupta2015 changed the title Fix Issue 475: Add Scroll-to-Top Button feat: Fix Issue 475 Add Scroll-to-Top Button Jan 14, 2025
@anmolgupta2015 anmolgupta2015 changed the title feat: Fix Issue 475 Add Scroll-to-Top Button feat: Return to top arrow feature/button Jan 14, 2025
@anmolgupta2015 anmolgupta2015 changed the title feat: Return to top arrow feature/button feat:Return to top arrow feature/button Jan 14, 2025
@TenzDelek
Copy link
Contributor

give a space after feat: and make the first letter of Return as return. it should fix the title check

@anmolgupta2015 anmolgupta2015 changed the title feat:Return to top arrow feature/button feat: return to top arrow feature/button Jan 14, 2025
Copy link
Collaborator

@ashmit-coder ashmit-coder left a comment

Choose a reason for hiding this comment

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

@anmolgupta2015 remove the changes in the package-lock json file.

@ashmit-coder
Copy link
Collaborator

Please make the arrow slightly larger IMO @anmolgupta2015 . Its not visible for a first time viewer.

@ashmit-coder
Copy link
Collaborator

Hey @Mayaleeeee could you suggest something to @anmolgupta2015 for the design.

@Mayaleeeee
Copy link
Member

Hey @Mayaleeeee could you suggest something to @anmolgupta2015 for the design.

Can he share a screenshot of what he is trying to do?

@ashmit-coder
Copy link
Collaborator

image

He is trying to add this arrow functionality in the bottom right.

@anmolgupta2015
Copy link
Author

@Mayaleeeee Mam Kindly let me know if you have any design idea of button or should I just make it bigger in size

@Mayaleeeee
Copy link
Member

I still don't know what you are trying to do. Can you point me in the direction where I can find the changes you want to implement on the conference website?

@anmolgupta2015
Copy link
Author

I still don't know what you are trying to do. Can you point me in the direction where I can find the changes you want to implement on the conference website?

Indeed mam
image
I am trying to solve issue number 475 which asks to add a button on which by clicking we return to top of website

@anmolgupta2015
Copy link
Author

Hii @ashmit-coder Sir,
I addressed your changes and would love to close the issue if no further changes required.

@Mayaleeeee
Copy link
Member

I still don't know what you are trying to do. Can you point me in the direction where I can find the changes you want to implement on the conference website?

Indeed mam
image
I am trying to solve issue number 475 which asks to add a button on which by clicking we return to top of website

Okay, I understand now.
The arrow can work, but it has to be a little bit bigger and visible.

@Mayaleeeee
Copy link
Member

Or we can have a Back to the Top with an arrown button on the screen when users scroll down. 🤔🤔

@anmolgupta2015 @ashmit-coder

@Mayaleeeee
Copy link
Member

Something like this
IMG-20250115-WA0010.jpg

@anmolgupta2015
Copy link
Author

Something like this IMG-20250115-WA0010.jpg

okk mam, will address these and will make final PR by tomorrow :)

@ashmit-coder
Copy link
Collaborator

Hey @Mayaleeeee does it look good to you?

@ashmit-coder
Copy link
Collaborator

In my opinion we should have a white shadow arround the button.

wdyt? cc: @Mayaleeeee @anmolgupta2015

@anmolgupta2015
Copy link
Author

In my opinion we should have a white shadow arround the button.

wdyt? cc: @Mayaleeeee @anmolgupta2015

Sounds great. I will implement it if you think it won't potentially distract from the main content. Do you want me to?

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
4 participants