Back to Top Footer Block for React

The band is an anchor to #top, which every browser treats as "the top of the document" even when the page has no element with that id. With reduced motion the link's own jump runs. Otherwise a click handler cancels the jump and calls window.scrollTo with behavior: "smooth". If your page scrolls inside a container rather than the window, scroll that element in goTop instead.

The hint tells the truth about the browser: pressing Home scrolls to the top of a page whenever focus isn't in a text field, so the block adds no key handler of its own. The link also announces Home as its keyboard shortcut for assistive technology.

With a plain jump the browser moves its starting point for the next Tab to the top of the page. With the smooth scroll the block leaves focus on the link, so a keyboard user presses Tab to carry on from the footer; if you prefer, move focus to your page's first heading in goTop once the scroll ends.

Nothing animates: the page jumps, the arrow does not lift on hover, and the band's tint appears without a transition.

Edit GROUPS and LEGAL at the top of the file; the wordmark is plain text with a serif italic style. Every link is an anchor with href="#": point each at its page or swap in your router's link.

The band spans the width and drops the Home hint, because there is no keyboard to press it on. The brand stacks over the groups, which run two to a row, and the legal band stacks.