Linking to blocks on a scrolling page (anchor link style) with a sticky header jumps too far down the page

Question

Hello there!

Wondering if anyone in the ExB community or Esri has come across this issue before and might have a solution or workaround. I have an experience with a long scrolling page and a sticky header. The plan was to use buttons as anchor links to jump down the page to the different sections or "blocks". I have no issue setting the button link to jump to a "block" section.

The issue is that when the user clicks the button, it jumps down the page too far. It seems like it is putting the top of the block at the top of the whole WINDOW and not the PAGE body accounting for the sticky header. I've set up a demo and included an attachment here (quality of gif is terrible, but it gets the point across).

My current workaround is to have like 200px top padding in the block so that when it jumps, the part that does go "behind" the header is just empty space. Unfortunately, that adds a lot of unnecessary empty space and messes with the design.

Maybe I'm missing a setting or something? Or maybe I can offset the jump to account for the header height somehow? Or is this a known bug? Any other ideas? Thanks!

ExB-block-link-issue.gif

megan_r_7-1727113098195.png

EDaechsel · Answer

Hi Mackenzie,

I experienced this issue too with my pinned side menu. My workaround was to have the menu buttons link to the Row widget directly above what I actually wanted.

For the topmost section (my Introduction), I had the Introduction Button widget in my menu link to the page header (which was a Text widget contained in a Row widget). For my sections after that, I added a Divider widget inside a Row widget. This created a clean way to break up sections, plus you can play around with the Style options of the Divider widget and the Padding options of the Row widget to customize the amount of space you need. In other words, for my Climate Change section, I created a Divider widget inside a Row widget at the end of my Introduction section. I named the Row widget "Climate Change section link" so it was easy to distinguish, and had my Climate Change Button widget link to "Climate Change section link" so that the Divider is hidden beneath the sticky header.