Smooth Scroll Site Anchor Links

Tags: General WordPress
jQuery(document).ready(function($) {
    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

How to Smooth Scroll Anchor Links on WordPress

In your child theme folder, usually in /wp-content/themes/your-child-theme/, create a new folder called JS ( if it doesn’t exist ). Paste the JS snippet and Update File.

For using a Code Snippets Manager: paste the code into a JS file and assign the title (Smooth Scroll Anchor Links) and save your file.

Why Should I Use This Code Snippet?

Enabling smooth scrolling creates a more fluid and visually appealing navigation experience. Instead of an abrupt jump to a section, the page glides smoothly, which helps users maintain their orientation, reduces disorientation, and makes your site feel more polished and professional.