We need to think about how this button will look like and where to place it on the web page. Any options?

The original design from v1 seems like a good start. Are there other ideas?

Design this button based from v1 is not mobile-friendly on v2.

We could place the button above or to the side of the hamburger.

To the side seems like a good option since the hamburger will already be obscuring any text on this horizontal row. Placing it above will mean another row of text is obscured.

Putting it as an option inside the hamburger doesn't sound great because I think scroll to top probably shouldn't take an extra click to get to.

It's worth mentioning this other issue: #2220

As users are not totally satisfied with the current mobile layout/navigation, we should think about what design we really want first, and where the back to top button would fit in this fixed design.

What if the back-to-top button is visible when the user is scrolling up...instead of the hamburger button and stays for few seconds, and gets hidden if the user doesnot scroll up or scrolls down. Aso I didnot see any hamburger button in mobile view
If like my idea...i can start working

@slorber OK, I'll continue discussion on that issue.

I think the Back to top button should only be visible when scrolling.

@lex111 @michaelknowles i could fix this by adding a round opaque arrow ( up or down) icon to scroll to the top.

If we are worried about it obscuring other content, the button could be made to fade out on the screen after few seconds of inactivity using scrollEventListeners.

I would like to implement this.

I have a simple prototype working in my fork here: https://github.com/EricAtMSFT/docusaurus

I tried a few things and landed on the button being inline, materializing after 400px of vertical scrolling, displayed as a small overlay on the content so as to not disrupt the sometimes long side bar content. It has a gradient to make it less noticeable. On mobile it snaps to align with the Hamburger button on the bottom left.

Feedback welcome for iteration!

Update. Added small arrow image to accompany link.

@lex111 Putting the "scroll to top" button along with the hamburger not only covers the screen but, it would be frustrating if someone clicked "scroll to top" instead of hamburger by accident

How about using something with the same hamburger, like holding the hamburger or swiping it or anything similar? as it would resolve both the issues I implemented correctly!

To say the very least, it can be a good silent temporary fix!

I can work on this if it sounds good!

(I am just a beginner, so ignore any mistakes)

Is this issue available? I would like to help. Thanks 🙂

@Rahulm2310 I think we should not implement this feature until we have a clear idea what the UX on mobile should be => #2220

(if we did, it would only be temporary, so if you have a nice temporary solution to suggest, why not, but we may not keep it in the long term)

I too would like to help on this.

And regarding the proposed solution by @Vishal19111999. I feel the long press can still be achieved with fair and less amount of code. But drag thing might ask for a big chunk of code that is well tested on all touch and pointing devices because drag + touch control is still fleky in many browsers IMO.

Plus that experience is not widely used for any user to implicitly know it (What I actually mean is user cant find on their own that there is a back to top button available on long press of docs side bar open button. We might have to instruct them about this feature well in advance.

How about showing back to top just above close docs sidebar only when sidebar is open. Sorry I am bad at overall painting for all my life. But I hope this conveys my thoughts.

And yes I too am new to this community and in fact this would be my first ever contribution here.
So please correct me if I am wrong anywhere.