Smooth Scroll

Note: This option requires GP Premium.

Smooth scroll can be turned on in Customize > General. Turning this option on will allow you to add the smooth-scroll class to your links, which will force them to smooth scroll to their anchor points.

This option is also integrated with the sticky navigation, so the top of your anchor point isn’t hidden.

Regular Links

To add smooth scroll to regular links, simply give the <a> element the smooth-scroll class.

<a class="smooth-scroll" href="#my-section">My Section</a>

Menu Items

To add smooth scroll to menu items, give the menu item the smooth-scroll class. You can learn how to give menu items classes here.

Modifying duration

The following snippet allows you to speed up or slow down the built-in smooth scroll duration:

add_filter( 'generate_smooth_scroll_duration', 'tu_smooth_scroll_duration' );
function tu_smooth_scroll_duration() {
    return 800; // milliseconds