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. 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 simple code:

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.

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

Your WordPress site now has a professional smooth scrolling effect that enhances user experience.