I have two pages with anchor links to sections: Services and Products We Love.
On both pages, and with each anchor, the anchor scroll stop point is not consistent. How do set the scroll stop point? I would like the scroll stop point to be 60px above each section’s H2.
TY!
Here is my site Read-Only: https://preview.webflow.com/preview/feather-and-nest?utm_medium=preview_link&utm_source=designer&utm_content=feather-and-nest&preview=80b95ce687f6cbe6914d00babf89ded1&mode=preview
Since you’re wanting to apply an offset on where the anchor lands, the easiest way is to create an “anchor element” that sits above your section that dictates where you want to scroll to stop. You can also opt to modify the position of this element (since it won’t be “visible”) by adjusting the top position a negative amount based on the height of your navbar.
If you opted to use custom code, it would look something like the following—although you should be able to do this natively with Webflow’s tools in the Designer:
a.anchor {
display: block;
position: relative;
top: -[Nav Height]px;
visibility: hidden;
}
Another option is to use top-padding on the element with the anchor ID to offset where the scrolling stops, however you’re design doesn’t really lend itself to that without further modification.
That makes sense. I do intend to scale down the navigation header height as the page scrolls, so I imagine that will complicate things even further. This is gets me much closer to figuring that out.
Thank you!
Heyyy! Happy almost New Year! Hope the holidays were safe and delicious!
Sooo…I think I’ve followed your instructions and have the anchor links scrolling a lot closer to where they need to be, and most people won’t notice what I can’t get my brain to figure out…and that is:
Because my nav shrinks on scroll (thanks to you)…where the anchor lands depends on whether the navigation animation has been triggered yet or not. My workaround was to add extra top margin to my anchor sections so that when the navigation shrink hasn’t been triggered, the anchor landing spot doesn’t cut off the H1 of the anchor sections. However, it would be ideal for that top margin to not be so severe and for the anchor stop point to be consistent no matter if the navigation animation has been triggered or not. (That’s so wordy!) Any suggestions?
Thanks!
Glad you were able to get it working!
A suggestion would be to include a height on an element within this anchor “helper” (if that’s what you ended up using) that is set to 0 (or is completely hidden) when the interaction happens. So for example, if the difference in height between the large (main) navigation and the small (triggered) navigation was 75 pixels, give this element a default height of 75 pixels and then change it to 0 pixels when the navigation interaction is triggered.
This may not be the cleanest way to achieve the same stopping position, but depending on how you implemented the anchor fix it should be fairly easy to piggy-back onto your current interaction.
Let me know if that’s confusing and I’ll try and walk you through getting something like that setup 
Yup. I think that makes sense. I will play with that after launch. I don’t want to break anything right now. Thank you!