Anchor link gets current state from mid VH and not on TOP of element when scrolled

Hi guys,

I’ve got the following issue:

I’ve set a sticky “sub” menu called “Scroll Menu” with some anchor links. Anchors are placed on each related div block element.

When I click on an anchor link, the page scrolls to the top of the corresponding div block element as per design. But when I scroll manually to very same element, it already activates the “w–current” class of the anchor link when the upcoming div block element gets past 50% VH.

I would like to add the “w–current” class to the corresponding anchor link only when the corresponding div block approaches the TOP of the screen, not 50% VH. As it is now, clicking on the anchor links scrolls to the top position of the corresponding element as per design but most of the time highlights the wrong anchor link (the one corresponding to the next div block past 50% VH) as I mostly have short div blocks.

I have not found a workaround.

The only possibility I’ve found is using TOC.js (https://projects.jga.me/toc/).

Does anyone else have an idea?
What am I doing wrong?
Before I start setting this up, does TOC works as intended for this user case?

Thanks for your help,
Tom


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2 Likes

Never mind. I found a solution with some javascript.

Hey tomfer, you would be a life saver if you could let me have the js you found that works, this has been an ongoing problem for me for years, I recently had a client that has this issue, so jumped back in to the forums to see if any progress has been made. Thanks Graham

Hey Graham,

Sorry for the late reply. My project has evolved a lot since then. I think I used a custom TOC that I found on the web that did not use the w-current class. By doing so, you should be able to solve that. Here’s one of them that works pretty well..

I hope it helps!
Tomas

Hey @tomfer

stumbled upon this thread and i got real mad about this stuff with the 50% thing.
I’m currently working on a new client project and recognized this “bug” again. The first time i just thought “okay, the browser is messing with some heights and calculates them wrong” - but this isn’t clearly the case. With this new project i built a super clear structure, it is only 4 sections and there is no way i messed something up on my end. I also checked an old project where i was dead certain that i hadn’t have this problem - and now it is exactly the same there too.

So Webflow is messing something up here very badly and it seems there is still no solution for that.

I found a thread from 2016 where a member describes exactly this problem but it just got closed.
Here: Change the settings for the current state of scroll anchor links

It is very important that Webflow will do something about it. So let’s reopen this thread here again because there are no other threads about this topic out there!