How to Enable Smooth Scroll on Anchor Links with GeneratePress Premium

If you’re using GeneratePress Premium and want to add smooth scrolling to your anchor or jump links, today I’m going to show you how to do that on a case-by-case basis, both for individual links and sitewide for all anchor links.

Step 1: Enable Smooth Scroll in the Customizer

The first step is to enable smooth scrolling in GeneratePress Premium.

1. Go to the Customizer in your WordPress dashboard.
2. Navigate to General settings.
3. At the bottom, you’ll see a checkbox for Smooth Scroll. Go ahead and enable that.
4. Hit Publish to save your changes.

This setting enables the smooth scroll feature, but it won’t take effect until you apply the correct CSS class to your links.

Step 2: Apply the Smooth Scroll Class to Individual Links

To demonstrate this, let’s look at a Services page that has a dropdown menu linking to different sections on the same page. By default, when you click these links, they jump abruptly to the section. We’ll add smooth scrolling to make the transition smoother.

1. Go to Appearance > Menus in your WordPress dashboard.
2. Locate the dropdown menu items (e.g., Service 1, Service 2, Service 3).
3. If you don’t see a CSS Classes field, click Screen Options at the top of the page and check the CSS Classes box.
4. In the CSS Classes field for each menu item, add the class smooth-scroll.
5. Save your menu.

Now, when you visit the Services page and click on the menu items, you’ll notice a smooth scroll effect rather than an abrupt jump.

Step 3: Add Smooth Scroll to Buttons and Other Links

You can also apply the smooth scroll effect to buttons or other internal links on your page.

1. For example, if you add a Button block and want it to scroll to another section, simply set the HTML Anchor(e.g., #service2) in the button link.
2. In the Advanced settings of the button, add smooth-scroll to the Additional CSS Class field.
3. Update your page, refresh it, and test the button. You should see the smooth scroll effect in action.

Step 4: Enable Smooth Scroll Sitewide for All Anchor Links

If you want all anchor links across your site to have the smooth scroll effect without manually adding the CSS class, GeneratePress Premium provides a PHP snippet to make this happen.

1. Go to Appearance > Theme File Editor in your WordPress dashboard.
2. Open your functions.php file (preferably in a child theme).
3. Add the following PHP code at the top of the file:
   add_filter( 'generate_smooth_scroll_elements', function( $elements ) { $elements[] = 'a[href*="#"]'; return $elements; } );
4. Save your changes.

Now, smooth scrolling will be applied to all anchor links sitewide. For example, if you have a Contact Us button on your homepage that links to a contact form at the bottom of the page, it will now scroll smoothly when clicked.

Conclusion

GeneratePress Premium makes it simple to add smooth scrolling to your site. Whether you want to apply it on a case-by-case basis using the smooth-scroll class or sitewide with a PHP snippet, you can create a smoother, more polished user experience for your visitors.