Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to set up smooth scrolling for hash links in WordPress. https://sridharkatakam.com/set-smooth-scrolling-hash-links/
// Enqueue site-wide scripts
add_action( 'wp_enqueue_scripts', 'sk_enqueue_scripts' );
function sk_enqueue_scripts() {
wp_enqueue_script( 'global', get_stylesheet_directory_uri() . '/js/global.js', array( 'jquery' ), '', true );
}
jQuery(function( $ ){
// Smooth scrolling when clicking on a hash link
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing');
});
});
jQuery(function( $ ){
// Smooth scrolling when clicking on a hash link
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
if ( $(window).width() > 1023 ) {
var $scrollTop = $target.offset().top-120;
} else {
var $scrollTop = $target.offset().top;
}
$('html, body').stop().animate({
'scrollTop': $scrollTop
}, 900, 'swing');
});
});
<a href="#services">Jump to services</a>
<div id="services">
<p>Praesent tincidunt felis ed, a euismod quam dapibus tempus. Phasellus accumsan tellus dui. Nam ullamcorper hendrerit nunc, id eleifend dui fermentum sed. Mauris pulvinar non leo in iaculis. Nunc consequat mi lectus, sit amet egestas felis cursus sed. Proin lacinia nisl eu blandit sodales. Maecenas ultrices urna sed lectus pulvinar laoreet ut in ante. Vestibulum et maximus risus. Praesent eu sodales nunc, et accumsan lectus.</p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment