Skip to content

Instantly share code, notes, and snippets.

@dustinleer
Forked from srikat/functions.php
Created July 20, 2021 18:11
Show Gist options
  • Save dustinleer/877b19301add3bf5d2844747c91c4ce7 to your computer and use it in GitHub Desktop.
Save dustinleer/877b19301add3bf5d2844747c91c4ce7 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