Scroll Anchor on Footer

Design help General
#1

Hey everybody,

Is there a way to set the anchor position for the “scroll-to” behavior on individual anchors? I’m trying to make the Contact side nav section highlight when the page reaches the contact footer at the bottom but it won’t go far enough without making the section tall enough to reach the top of the browser…

Published Preview:
https://joe-trapanese.webflow.io

Here is my site Read-Only: https://preview.webflow.com/preview/joe-trapanese?utm_medium=preview_link&utm_source=designer&utm_content=joe-trapanese&preview=191bb7d4c1548efc9c34466ca6154870&mode=preview

#2

Hi @effixx,

Anything can be done with custom code.

However to get what you are describing done natively, you have to have a section of block that is more in view and closer to the top of the page for that highlighted effect to happen.

#3

Ah, thanks. Was hoping there was a secret attribute like good ole’ data-scroll = mid instead of customizing the way the native behavior works…

I’m trying to imagine a creative hack with an invisible anchor but unfortunately the previous section is pretty close to that last Contact section.

#4

@effixx,

Id recommend adding more space around that footer/contact area. it seems a bit smushed, especially if it is to be use and an anchor section.

#5

Ah yeah, it’s trying to be a footer and a section at the same time :slight_smile: Thanks for the suggestion Brandon, much appreciated.

#6

On second thought, I’d pretty much need to make it at least 100vh in order for the anchor to reach browser top…

#7

@effixx, that would most likely be the case.

Itll still get you there by way of clicking it, but the visited color wont be achieve without some custom code. I dont believe an attribute will work in this case.

#8

Awesome, I’ll dig for what I’m assuming is a JQuery method to swap the selected class on the nav. Hopefully I can do that without breaking the existing behavior on the other links.

1 Like
#9

Wound up modifying the design by exposing more of the form, thanks again for your help!

1 Like