How to add a smooth scrolling effect to WordPress

Adding smooth scrolling to your WordPress site creates a more polished user experience when visitors click on anchor links. This article will show you how to set it up on WordPress. We will suggest a very simple method that you can implement in a few seconds.

Using custom CSS code

The method is using a custom CSS code. This works in most modern browsers (Chrome 61+, Firefox 36+, Edge 79+, Safari 15.5+) and requires no JavaScript or plugins. Note: Safari only gained support in version 15.5 (March 2022), and Internet Explorer does not support this feature. Bascially, just copy and paste the code following this instruction:

1. Log in to your WordPress admin dashboard
2. Go to Appearance > Customize
3. Click on “Additional CSS”
4. Add this improved code:

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

5. Click “Publish” to save your changes

This CSS method works in most modern browsers and requires no JavaScript or plugins.

Important: The @media (prefers-reduced-motion: no-preference) wrapper respects users who have enabled “Reduce Motion” in their device accessibility settings. This prevents discomfort for users with vestibular disorders or motion sensitivity.

Alternative (simpler but less accessible): If you want to enable smooth scrolling for all users regardless of their motion preferences, you can use:

html {
  scroll-behavior: smooth;
}

Testing the smooth scroll.

To test if smooth scrolling is working:

1. Create a page with multiple sections using anchor links
2. Add this example code to a page using the WordPress block editor:

<div>
  <p><a href="#section1">Jump to Section 1</a> | <a href="#section2">Jump to Section 2</a></p>
  
  <div id="section1" style="height:800px;background:#f5f5f5;padding:20px;">
    <h2>Section 1</h2>
    <p>This is section 1 content.</p>
  </div>
  
  <div id="section2" style="height:800px;background:#e5e5e5;padding:20px;">
    <h2>Section 2</h2>
    <p>This is section 2 content.</p>
  </div>
</div>

3. Preview or publish the page and click the links to see the smooth scrolling effect

Browser Compatibility Notes:

• Modern browsers (Chrome 61+, Firefox 36+, Edge 79+, Safari 15.5+, Opera 48+): Smooth scrolling works natively
• Safari 15.4 and older: Smooth scrolling is NOT supported (users will see instant jumps)
• Internet Explorer (all versions): NOT supported
• Older browser versions: May fall back to instant scrolling

For sites with many older browser visitors, consider using a WordPress plugin with JavaScript fallback for better compatibility.

Your WordPress site now has a professional smooth scrolling effect that enhances user experience while respecting accessibility preferences.