Scroll to element > element partially hidden by header

[umiumansa]

I’m working on a single page with various groups appearing and disappearing on the page based on user interaction.

At some point I need to add a warning, and bring focus on that warning, then continue by bringing focus on another element in the page.

I’m using workflow’s “scroll to” element.

However, the element it scrolls to is partially hidden by the floating header. So even though the element is visible, it is not fully visible and looks very odd. See example of warning here:

What’s the trick?

[umiumansa]

Hi and thanks.

This works for the alerts that are the top of the page, however it doesn’t work for elements mid-page. Example: after clicking “yes proceed” the focus should go to the the form few positions below.

To test that, I’ve added an anchor (the blue flag) and set the workflow to scroll to that anchor.

However, in practice it scrolls to somewhere in the middle of that form element.

The anchor is way above the header in this case. So something’s just not right.

[hye]

Hi, sorry I did not see this, you can offset where the scroll to.
Add the height of the floating header in this input.

[umiumansa]

Hey thanks for that. Didn’t see it either.

However, it seems to work if I scroll to the element above the one I’m aiming at. So that’ll be my solution.