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'.

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 https://cdnjs.com/libraries/jquery
  3. Add the code before the closing  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!