feat(ui): add scroll to top button

[Robinaditya1045]

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

[github-actions]

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.

[netlify]

✅ Deploy Preview for peaceful-ramanujan-288045 ready!

Name	Link
🔨 Latest commit	a25b09f
🔍 Latest deploy log	https://app.netlify.com/sites/peaceful-ramanujan-288045/deploys/67f3bd7386d4b800081d1e15
😎 Deploy Preview	https://deploy-preview-586--peaceful-ramanujan-288045.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[AceTheCreator]

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]

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

[Robinaditya1045]

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]

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

Kinda, yes.

[Robinaditya1045]

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

[AceTheCreator]

@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]

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

I think it should be placed toward the bottom right corner

[Robinaditya1045]

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

[ashmit-coder]

LGTM!
cc: @AceTheCreator

[ashmit-coder]

Hey @Robinaditya1045 dont you think we should have the illustration it as a svg file rather than an editable js file.

[Robinaditya1045]

Hey @ashmit-coder, I have made the required changes

[ashmit-coder]

Hey @Robinaditya1045 I am sorry for the mis understanding on my end, but you can revert back to your older changes, as thats the theme we were following.

[Robinaditya1045]

Hey @Robinaditya1045 I am sorry for the mis understanding on my end, but you can revert back to your older changes, as thats the theme we were following.

Sure!

[Robinaditya1045]

@ashmit-coder reverted

[AceTheCreator]

LGTM 🚀

cc @ashmit-coder @Mayaleeeee