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

Design help Layout & Design
1

I build my wedding site with webflow. All navigation-items are Anchor-Links.

I have a strange thing happening on my site: The scroll to the anchor looks fine (not overlapping the heading of the section) but just in the last moment the content is moving up again. (i added padding to my sections that why it looks kinda ok now - but not how i wanted it in the beginning).

For some of the lower sections (like #geschenke) everything works like exspected (with the anchored section starting under the fixed nagivation).

I didn’t find any help in all the posts about anchoring and didn’t wanted to add hidden divs for each anchor.

EDIT: Looks like everything works right in Firefox (but not in Chrome)

Thanks a lot
Simon

Here is my site Read-Only: LINK

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!

3

Hi Carlos,

Thanks a lot for your answer. I’m glad i’m not the only person with this problem.

I can’t insert script in the free Plan of webflow. I helped myself with padding in the sections (not perfect, but better then nothing).

1 Like