Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active July 20, 2021 18:11
Show Gist options
  • Save srikat/8738824714370b9784b3818a15c4244a to your computer and use it in GitHub Desktop.
Save srikat/8738824714370b9784b3818a15c4244a to your computer and use it in GitHub Desktop.
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