Add scroll up

[Diya-od]

Description

Added a Scroll-to-Top button on the leaderboard page to improve navigation and user experience. Users can now quickly return to the top of the page after scrolling through the leaderboard.

Linked Issue

Fixes #89

Changes Made

-Added a Scroll-to-Top button to the leaderboard page.
-Implemented smooth scrolling behavior when the button is clicked.
Configured the button to appear only after the user scrolls down a certain distance.
-Styled the button to match the existing UI design.

Type of Change

• [ x] Bug fix
• [ x] New feature
• UI/Visual update
• Documentation update
• Refactor

Testing

• [ x] Tested locally
• [ x] Tested on mobile viewport (if applicable)
• [ x] No console errors introduced

Checklist

• [ x] My code follows the project's coding style
• [ x] I have formatted my code locally using Prettier
• [x ] I have performed a self-review of my code
• [x ] My changes generate no new warnings or errors
• I have updated documentation if required
• [x ] I have linked the relevant issue

Screenshots / Screen Recording

[github-actions]

Thank you for submitting a pull request.

Please ensure your changes comply with the project's contribution guidelines and that all workflow checks pass successfully.

A maintainer will review your submission shortly.

[jagdish-15]

I had originally intended this feature to remain primarily mobile-focused, as I had mentioned in the issue as well, since pagination already keeps the desktop page length relatively manageable.

Right now the scroll-to-top button is also visible on larger desktop layouts, which is not really needed.

Could you please update the implementation so the button is limited to smaller/mobile screen sizes?

[Diya-od]

Hello @jagdish-15 ,
Thanks for the feedback. I've updated the implementation so the scroll-to-top button is only shown on smaller/mobile screen sizes and remains hidden on desktop layouts, where pagination already keeps the page length manageable.

[jagdish-15]

I tested this locally and there are still a few issues that need to be addressed before this can be merged.

Right now a new <script> tag has been introduced but never closed properly, which ends up breaking the page entirely. Please make sure to test the implementation locally after changes before pushing.

The current button also feels a bit too large visually for the UI. A much smaller floating arrow-style button (similar to WhatsApp’s scroll button) would probably fit the existing design much better.

There’s also still a layout issue on mobile where the button overlaps the footer area when scrolled to the absolute bottom of the page. Instead of placing it that low, it would probably work better if the smaller button was positioned slightly higher above the footer area so the footer content remains fully accessible.

Also, since the leaderboard logic has now been modularised, please move the JS logic related to this feature into a separate file inside frontend/js/leaderboard/ instead of keeping it inline in the HTML. Something like mobile-scroll-top.js would make sense here.

[Diya-od]

hello @jagdish-15 ,
there is an error but I could not find it but I changed the all required things according to your guidence, take a look and tell me if any kind of changes need then i will solve it and give it you according your needs.