Create a "Back to Top" Block

[beafialho]

What problem does this address?

The popularity of responsive web design has led to a proliferation of single-column, long-page designs both on mobile and desktop. A consequence of these designs has been the Back to Top button, which is a shortcut that allows users to quickly navigate to the top of the page.

What is your proposed solution?

I suggest adding this feature to the site editor, perhaps it makes sense for it to be a block, instead of a hidden feature in the Button block.

I expect it to be fully customisable (colors, typography, background, sticky vs non-sticky, etc) here are a few example designs:

cc: @iamarinoh @iamtakashi @jasmussen

[jasmussen]

I like it, I think it's useful and valid, and as combined with sticky positioning as a separate tool, it seems very feasible to do.

Technically it seems a matter of adding <a href="#top">Back to top</a> in a block, with whatever customization options we might want. Digging a little bit, it seems like that should work out of the box in modern browsers, as supposedly they are able to parse the #top location without the need for a named anchor or an ID. But please if I'm incorrect in this, please correct me, as this is an important aspect to be sure of, before starting. If this is not a safe assumption, it's technically a more challenging issue.

[iamtakashi]

+1. Thanks for opening the issue, @beafialho!

[gziolo]

I wanted to share another use case for the "Top" link:

Example page from the WordPress developer portal:

https://developer.wordpress.org/reference/functions/clean_user_cache/

While you could recreate it with the Group block that displays Heading and Top blocks displayed in sma row, it might be pretty inconvenient to repeat it with all headings on the page. Usually, this type of UI elements you see injected with a plugin that either filters HTML or injects HTML with JavaScript.

Aside, there is a discussion about a new concept in https://github.com/WordPress/gutenberg/issues/50029 - Block Behaviors. The scope is still not fully defined, but the idea is that not everything on the page needs to be a block.

[ramonjd]

Digging a little bit, it seems like that should work out of the box in modern browsers, as supposedly they are able to parse the #top location without the need for a named anchor or an ID. But please if I'm incorrect in this, please correct me, as this is an important aspect to be sure of, before starting. If this is not a safe assumption, it's technically a more challenging issue.

I like this idea.

Seems like the assumption is pretty accurate!

https://caniuse.com/?search=%23top https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#sect6

If we wanted to get tricky we could have a smooth scroll option as well (might require a bit of JS).

[carolinan]

Another reason to allow users to upload svgs so that the icon can be customized...

[jasmussen]

Awesome, thanks for all the feedback!

I'm going to assume that the designs provided are sufficient for a dev to pick this one up. I'm thinking a first version can just be an editable rich text field that defaults to outputting "Back to top", with no inspector options and just regular rich text toolbar options. Any iconography can then be inserted as unicode glyphs (such as ↑) or emoji in the rich text, and hopefully through an "Icon" inline-block or other feature in the future.

But if these do need more design, let me know and we'll put something together.

[hanneslsm]

In general I'm supporting the idea of such a block, but I'm also sceptical. As an iPhone user I'm having the habit of using the native build-in function to scroll to the top of a website or apps (tap on the clock). Sometimes websites that still display a to-top-arrow on iOS annoy me, especially if the design of the arrow takes up much space. Speaking of devices: accessibility is very importing here. I could think of navigating through websites on a smart TV. If the button is easy to access it'd be a great enhancement for the website users.

Considering different ways if or when to display the arrow depending on the operating system would create a immense overhead for such a block.

On the other hand, if such block will not be created, theme developers will find "hacks" to create a to-top arrow (probably using the sticky feature or so) without considering accessibility.

[richtabor]

I think this could be an interesting idea as a standalone block per https://github.com/WordPress/gutenberg/issues/58773.