The following script will smoothly scroll the page when there is a hash on the URL, avoiding to overlap the sticky header in part of the targeted section. Note that the 125 value is hardcoded here because it’s the height of the sticky header. It needs to be replaced with the height on the site that will be used. We are not getting the height dynamically because generally, the height of the sticky header changes when scrolling, so we just set a fixed value to keep things simple. But this can be improved to make it dynamically (we were in a hurry when I created the script).
jQuery(document).ready(function($){
var hash = window.location.hash;
if ( hash ) {
console.log( $( '.elementor-element-5ecf208c' ).height() );
var top = $( hash ).offset().top - 125 /*- $( '.elementor-element-5ecf208c' ).height()*/;
if ( $( '#wpadminbar' ) ) {
top -= $( '#wpadminbar' ).height();
}
$('html, body').animate({
scrollTop: top,
}, 'slow');
} else {
console.log( 'No scroll' );
}
});
