Back-to-top button
A round button at the bottom right that appears after scrolling down and takes visitors back to the top of the page.
<button type="button" class="sf-back-to-top" aria-label="Back to top" hidden>↑</button>
<style>
.sf-back-to-top {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 999;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: #1e1e1e;
color: #fff;
font-size: 20px;
line-height: 44px;
cursor: pointer;
opacity: 0.85;
}
.sf-back-to-top:hover,
.sf-back-to-top:focus-visible {
opacity: 1;
}
</style>
<script>
( function () {
var button = document.querySelector( '.sf-back-to-top' );
if ( ! button ) {
return;
}
var toggle = function () {
button.hidden = window.scrollY < 600;
};
window.addEventListener( 'scroll', toggle, { passive: true } );
toggle();
button.addEventListener( 'click', function () {
var smooth = ! window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches;
window.scrollTo( { top: 0, behavior: smooth ? 'smooth' : 'auto' } );
} );
} )();
</script>
Good to know
Change the colours in the style part. Translate “Back to top” (read aloud by screen readers) into your language.
In these packs
- Content and media: Shortcodes, links, images and small design touches for the public site.