Last active
July 20, 2021 18:11
-
-
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/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 ); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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