Add a back-to-top button in WordPress without a plugin

What WPFront Scroll Top does

WPFront Scroll Top adds a customisable scroll-to-top button, with options for its look, position and where it shows. The plugin on WordPress.org

What the snippet does the same

• A button appears after visitors scroll down and takes them back to the top of the page.
• It scrolls smoothly, and it has a label for screen readers.
• It works with any theme.

What's different

• The snippet is one round arrow button at the bottom right. You change its colours and size in the code. The plugin has a settings screen with text, image or icon buttons, positions and colours.
• The plugin can hide the button on small screens or on chosen pages, hide it after a set time, or link it somewhere else. The snippet shows it on every page, after 600 pixels of scrolling.
• The snippet jumps instead of gliding for visitors who asked their device for less motion.

The snippet: 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>

Notes, where it runs and what it was tested with

Switching from the plugin

1. Install the snippet in Snipfire (it arrives switched off).
2. Deactivate WPFront Scroll Top.
3. Switch the snippet on. Snipfire checks the code and test-loads your site first.
4. Check the page it affects, then delete the plugin.