Scroll To with Fixed Header

This jQuery snippet is the holy grail of jQuery Scroll To with Fixed Header and the only script that we have found to work with Webflow Fixed Header with Scroll. Typically a website with a Fixed Header does not account for the height of the header in the jQuery ScrollTo, and this means that you get an offset equal to the height of the fixed header. The usual annoyance here is that your header covers content or is offset too far from the slide anchor (page section with #ID etc.). The following script solves this issue, and in this application, we have also added a further offset of 48px which drops the scrollTo slightly off the target which we find neater. If you want the Scroll To to drop exactly on the anchor delete ‘+ 48’.

(function($) {
$("a[href*=\\#]:not([href=\\#])").click(function()
{
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|| location.hostname == this.hostname)
{
var target = $(this.hash),
headerHeight = $(".header-wrapper").height() + 48; // Get fixed header height
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length)
{
$('html,body').animate({
scrollTop: target.offset().top – headerHeight
}, 500);
return false;
}
}
});
})(jQuery);
jQuery ScrollTo with Fixed Header

Add Scroll To with Fixed Header Script

Simple:-

  1. Edit the script to include your Fixed Header class (‘.header-wrapper’ in this instance).
  2. Make sure you have loaded jQuery from a leading CDN like <cdnjs>
  3. Add the code before the closing </body> tag on your site. On Webflow this is easily added in Project Settings > Custom Code > Footer Code. In all cases, don’t forget the opening and closing ‘script’ tags 🙂

That’s it, let us know how you get on!

About the Author
Scroll To with Fixed Header 0da77002febbfe28d15144a57bbcc2c9 s 180 d mm r g

Glenn

A highly experienced Web Designer / Web Developer (Webflow, WordPress, Weebly & Custom), Front-end / Back-end Developer & New Media Specialist, with extensive knowledge of a wide spectrum of technologies in the Development and Creative Industries, built up over a number of years.