[FEATURE] Add scroll to top button for better user experience

[aasthaanand09]

Hi @roannav,
I visited the website, and the UI is really really impressive, but I saw that a "scroll to top button" is missing here. I think if we add a scroll to top button it will enhance the user experience. I can add a sticky scroll to top button, matching to the current design. I am very curious to do that!
May you please assign it to me?

[roannav]

Hi @aasthaanand09 Many great contributors have helped to build this website 👍

Thank you for suggesting this issue!

characters.html has a "Back to Top Button" already in place. It appears in the lower right corner after you start scrolling.

Please add this "Back to Top Button" to plot.html, scenes.html, games.html, gallery.html, and terms-of-use.html.

Also there is a minor bug, where on very wide screens (eg 2560px), because the "Back to Top Button" is always in the lower right, it's actually too far to the right. It would look better if it was in lower right of the main content area, like it is for smaller width screens.

Currently, see the green Top button... it's too far right:

[aasthaanand09]

Hi @roannav,

Thank you for clarifying that the "Back to Top Button" exists on the characters.html page. I'll make sure to implement it across plot.html, scenes.html, games.html, gallery.html, and terms-of-use.html as requested.

Regarding the bug on wider screens, I completely understand the issue. To ensure a consistent and optimal user experience, I'll adjust the positioning of the "Back to Top Button" for larger screens. Placing it in the lower right of the main content area for wider screens will certainly improve its visibility and alignment.

I'll start working on these tasks right away and keep you updated on the progress.

Thank you for the opportunity to contribute to the project!

Best regards,
@aasthaanand09

[roannav]

Hi @aasthaanand09 ,

The JavaScript code for the Back to Top Button is in js/topbutton.js

The Back to Top Button styles are in css/default.css
It has code like:

#backToTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;

You can change how far right the button is just by changing the right CSS property.
Something like right: calc(max(0px, (100vw - 1400px)/ 2) + 30px); should work to adjust the button's position on wide screens. 100vw is the full width of the screen. The max(0px, ...) is to avoid getting a negative number.

Only 1 day left for Hacktoberfest. Good luck! 😄

@roannav