Suggestion: Add a floating “Back to Top” button for easier navigation

[piyusha-chopra]

Describe the feature

Currently, PictoPy has a side scrollbar that allows users to navigate between sections, which works well. However, to improve user convenience, especially on pages with many sections, a floating “Back to Top” button could be added. This would allow users to quickly return to the top of the page without having to move the cursor to the first section of the scrollbar.

Benefit:

• Provides a more intuitive and faster way to navigate back to the top.

• Enhances user experience, particularly for users on long pages.

Add ScreenShots

We can add the back-to-top button at the bottom right corner of the page. Clicking the button will smoothly scroll the page back to the top.

Record

• I agree to follow this project's Code of Conduct
• I want to work on this issue

[github-actions]

👋 Thanks for opening this issue! The maintainers will review it shortly. Till then, do not open any PR. This is a strict rule we like to follow around here :)

[piyusha-chopra]

@rahulharpal1603 sir, If this is okay, I'd like to work on this issue.
Could you please assign this issue to me?

[sayyadshahid]

Hi @rahulharpal1603
If this issue is still available, I’d be happy to work on it.
I’ll wait for your confirmation before starting anything.
Thanks!

[Abhinandankaushik]

Hi @rahulharpal1603
i would like to work on this issue
if work on various similar problems and
currently working on fronend related issue
would you please assign it to me so i will further create PR

[Rajveersinghsisodiya19]

Hi @rahulharpal1603 👋

I would like to work on this issue

my approach is to add a small reusable BackToTop react component that:

1. listens to scroll events
2. becomes visible after a scroll threshold
3. smoothly scrolls the user back to the top when clicked
4. does not interfere with the existing sidebar navigation
5. button hides when user is already at the top

Reference (UI placement – Back to Top button):

The component can be imported into home.tsx to keep the page clean and maintainable.

optionally I was also thinking of adding keyboard support
(example T → scroll to top D → scroll to bottom), if that aligns with the project’s UX.

I’m ready from my side with the approach, and once you confirm or assign the issue, I can start working on it right away. 😃🤝🚀

Thanks!