shadcn.io is not affiliated with official shadcn/ui
Back to Top Footer Block for Solid
A footer for a long-read magazine that opens with a full-width back-to-top link band, then the brand, three link groups and a legal band.
Installation
Overview
A footer that ends a long scroll for Solid with Ark UI. It opens with a full-width band that is one link, an up arrow, "Back to top" and a hint, "Or press Home", which tints under the pointer and the keyboard. Under it, a band holds the brand (a serif wordmark and a sentence) and three groups of links in a nav labelled Footer, then a legal band closes the footer. The link is a real #top link, so with no script, or with reduced motion, the browser jumps to the top of the page itself; otherwise the script replaces the jump with a smooth scroll. The rails and top rule come from the Guides spine, every band's rule is drawn by Guides, and none is drawn under the legal band because a footer ends the page.
FAQ
How does the scrolling work?
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.
Does the Home key do something?
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.
Where does focus go afterwards?
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.
What happens with reduced motion?
Nothing animates: the page jumps, the arrow does not lift on hover, and the band's tint appears without a transition.