add a back to top button on docs page

[Tanujkanti4441]

ESLint version

v8.34.0

What problem do you want to solve?

In all docs page the navigation links to the different topics of the page is on the top but some pages have too many material on it. so it is a tedious task to scroll to the top again in devices like tablet or phones. and for small screen size the main navigation of docs (navigation links for different pages of docs) is also on the top.

What do you think is the correct solution?

A back to top button would be a good idea to make the scrolling easy.
something like this.

Participation

• I am willing to submit a pull request for this change.

Additional comments

No response

[snitin315]

Hi @Tanujkanti4441, thanks for creating the issue.

On the Desktop, we have a sticky table of contents on the right. So it's easy to scroll to the top with just one click.

Screenshot

However, on Mobile, the table of contents is at the top only. So, users will have to scroll all the way up to the top. I don't have a strong opinion here. I would not be against adding a back-to-top button for mobile/tablets. I'd like to know what the @eslint/website-team thinks about this change.

[harish-sethuraman]

This sounds convincing enough for me if we want to implement it in the mobile/tablet view. But we might have to handle this in all pages across the documentation

• teams and other pages
• if this should come till footer or not
  • if yes make sure to not overlap with footer contents etc.
    I'd like to hear opinions as well + cc: @eslint/eslint-tsc's opinion

[kecrily]

We could also consider TOC sticky on mobile, but this may require some design tweaks.

[Tanujkanti4441]

Hi @Tanujkanti4441, thanks for creating the issue.

On the Desktop, we have a sticky table of contents on the right. So it's easy to scroll to the top with just one click.
Screenshot

However, on Mobile, the table of contents is at the top only. So, users will have to scroll all the way up to the top. I don't have a strong opinion here. I would not be against adding a back-to-top button for mobile/tablets. I'd like to know what the @eslint/website-team thinks about this change.

my regular screen size (1366px) doesn't have this sticky table i think this is only for above and equal to 1400px screen size. Is it same for you as well?
But completely agreed with the one click thing for PC. I was just going through the docs on the mobile and and since i was using the navigation table for reaching to some specific topics i had to scrolled it up to the top repetitively.

[snitin315]

my regular screen size (1366px) doesn't have this sticky table i think this is only for above and equal to 1400px screen size. Is it same for you as well?

Oh yes! I see it is available only for screen size >= 1400. In that case, we should improve this.

[Tanujkanti4441]

We could also consider TOC sticky on mobile, but this may require some design tweaks.

But the main navigation of docs pages is also in the top in mobile/tablet size

screenshot

[kecrily]

We could also consider TOC sticky on mobile, but this may require some design tweaks.

But the main navigation of docs pages is also in the top in mobile/tablet size

I mean to keep it always on top, even after sliding.

[Tanujkanti4441]

I mean to keep it always on top, even after sliding.

I got it. I just mean that even if we make the table of contents sticky, we have left an another navigation (for navigating to different pages of docs) that is also in the top. so for that navigation we also need to scroll up the screen if we are in the bottom of a page. and we can't make both TOC and navigation sticky.

[nzakas]

No objections if anyone wants to try this out. I would say that it should be consistent across all documentation pages, so if we have it as part of the headings that's fine so long as they're in the same spot for all headings.

[Tanujkanti4441]

so if we have it as part of the headings that's fine so long as they're in the same spot for all headings.

@nzakas would you please clear this part more. Is it just for the example's sake that how the solution should be or you indicating the TOC specifically.

If it is not about sticky TOC can i try to implement a back-to-top arrow.

[nzakas]

My only point is that it should be consistent across all docs pages, that's all.

I'll leave it to the @eslint/website-team to decide on specifics.

[harish-sethuraman]

I feel like sticky TOC can be a overkill for long pages. At this point a back to top button should suffice.
cc: @amareshsm @kecrily (friendly ping)

[amareshsm]

I'm ok with back to top button approach. As harish mentioned sticky TOC can be overkill.

[snitin315]

It seems we are in agreement to add a back to top button. @Tanujkanti4441 Would you like to submit a PR for this?

[Tanujkanti4441]

It seems we are in agreement to add a back to top button. @Tanujkanti4441 Would you like to submit a PR for this?

Yes

[harish-sethuraman]

Can we do the same in the eslint.org repo as well? Shall I re open this issue and transfer it?