While implementing the Smooth Page Scroll code from CSS Tricks, we encountered an issue where clicking on a navigation link for the first time only scrolls down to a point that is approximately 700px above the intended section. Subsequent clicks work perfectly fine, but it's that initial navigation click that behaves strangely.
We even tried using window.load instead, thinking that perhaps not all page elements were loaded by the time of the first click, but unfortunately, that didn't resolve the problem.
jQuery Version: 1.12.4/jquery.min.js
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});