Smooth scrolling

Links to a part of the same page (#contact) glide there instead of jumping. Visitors who asked their device for less motion still jump.

Type CSS (CSS)
Runs Public site, in the page head
Tested with WordPress 7.1

CSS

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

In these packs

Content and media: Shortcodes, links, images and small design touches for the public site.

Install it in one click

It's already in the Snipfire plugin's library. Enter your site's address and it opens there, ready to install. It arrives switched off, and Snipfire checks the code and test-loads your site before you switch it on.

Needs Snipfire on that site and you logged in as an administrator. Your address stays in this browser; we don't see it. Get Snipfire free

Or add it by hand

Click + New and choose CSS.
Paste the code and give it a name.
Where: Public site, in the page head.
Save and switch it on.

Works in any snippet plugin, or a child theme's functions.php. Without the safety net, though.

In these packs

More from this pack

Move your snippets over this afternoon.