Anchor-Jump | Scrolling-Script Problem in Chrome (Firefox is ok): Looks good, then jumps in the last moment, then overlapping

Design help Layout & Design
2

I have exactly the same problem you described.

It looks a like bug in chrome.

Luckily I found a workaround to fix this:

  • We need the custom css property ‘scroll-margin-top’ . It’s value should be higher that the jump. (Don’t ask me why)

Webflow doesn’t make it easy to add custom properties…

I managed to do it using the custom-code feature

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script>
  
$( document ).ready(function() {
  $('#my-anchor').css('scroll-margin-top','150px');
}

Adding jquery just for this is a bit of an overkill, but hopefully chrome will fix soon the issue and the code can be removed.

I hope it helps!