Remove the #id Hash From the URL on Anchor Link Click

When a link points to a section on the same page, such as #services-link, the browser jumps to that section and adds the #services-link hash to the URL in the address bar. This jQuery snippet scrolls smoothly to the section instead and keeps the hash out of the URL.

The link

Give the link the btn-click class and set its href to the ID of the section it should scroll to. The page needs an element with that ID, for example a section with id="services-link".

<a class="btn-click" href="#services-link">OUR SERVICES</a>

The jQuery

Add this to your theme’s JavaScript file. jQuery must be loaded first; in WordPress, enqueue your script with jquery as a dependency.

jQuery(document).ready(function($) {
    $(".btn-click").click(function(event) {
    event.preventDefault();
    $('html,body').animate( { scrollTop:$(this.hash).offset().top } , 1000);
    } );
  } );

• event.preventDefault() cancels the default jump, which is why the hash never reaches the URL.
• this.hash is the #services-link part of the link, and $(this.hash) selects the target element.
• offset().top is the target’s distance from the top of the page, and animate() scrolls both html and body there, because browsers differ in which one scrolls.
• 1000 is the scroll duration in milliseconds.
• jQuery(document).ready(function($) { … }) lets you use $ inside the function, since WordPress loads jQuery in no-conflict mode. Without it, you’d hit TypeError: $ is not a function in WordPress.

If the target ID doesn’t exist on the page, the script throws an error, so keep the href and the ID in sync. With a fixed header, subtract its height from offset().top so the section title isn’t hidden behind it. If the WordPress admin bar also covers a fixed header for logged-in users, see offsetting a fixed header for the admin bar.

Related articles

• changing the URL without a page reload: for when you do want the address bar to update