フローティングボタン
Basic Floating Action Button
A round, fixed icon button for the one action a screen is really about - with a ring that survives any backdrop.
#fab#floating#icon
6 個のフレームワーク初級
Loading…
A back-to-top button that appears past a scroll threshold and leaves the tab order when it leaves the screen.
<!--
inert while hidden, not just transparent. A button faded to opacity:0 is
still focusable - Tab lands on an invisible control and the focus ring
appears over nothing. `inert` removes it from the tab order and the
accessibility tree in one attribute; the class only handles the paint.
-->
<button class="totop" type="button" aria-label="Back to top" inert>
<svg class="totop__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">
<path d="M12 19V5M5 12l7-7 7 7" />
</svg>
</button>
<script>
(function () {
var button = document.querySelector('.totop');
if (!button) return;
var THRESHOLD = 320;
function sync() {
var past = window.scrollY > THRESHOLD;
button.classList.toggle('totop--visible', past);
// Keep the tab order in step with what is on screen.
if (past) {
button.removeAttribute('inert');
} else {
button.setAttribute('inert', '');
}
}
// passive: this handler never calls preventDefault, and saying so lets the
// browser scroll without waiting on it.
window.addEventListener('scroll', sync, { passive: true });
sync();
button.addEventListener('click', function () {
var reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
window.scrollTo({ top: 0, behavior: reduced ? 'auto' : 'smooth' });
// The button is about to hide, so focus cannot stay on it - hand the
// keyboard back to the top of the document, which is where the click
// just took the eye.
document.body.focus();
});
})();
</script>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label | string | 'Back to top' | 読み込み中に読み上げられるアクセシブルなラベル。 |
distance | number | 320 | 要素が移動する距離（ピクセル）。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The bug in nearly every back-to-top button on the web: it is faded to `opacity: 0`, and a transparent button is **still focusable**. Tab lands on it, the focus ring draws over empty space, and a keyboard user is on a control they cannot see. The React tabs unmount it outright; the HTML and Tailwind tabs use `inert`, which drops it from both the tab order and the accessibility tree in one attribute, written by the same handler that flips the paint - so invisible and unfocusable can never come apart. `window.scrollTo` is passed `behavior: reduced ? 'auto' : 'smooth'` from a live `matchMedia` check, because a smooth scroll is a full-viewport animation and CSS alone cannot reach a JS scroll call. The appearance fade is behind `motion-safe:`/`prefers-reduced-motion` and its reduced fallback lands on the end state - the button still appears and disappears at the threshold, it just cuts. Tune `distance`: 320px is roughly one viewport on a phone, which is the point at which "back to top" starts meaning something.