Is there any way to have an offset for hash scrolling?

[Leong-Qi-Jin]

I would like to offset the scroll to hash by approximately the size of my sticky header, but couldn't seem to find a solution for this here. Is there some sort of configuration that I have missed or is there some sort of CSS solution to this?

[sunnypatell]

@Leong-Qi-Jin this doesn't need any TanStack Router config. it's solved entirely with CSS using scroll-padding-top:

html {
  scroll-padding-top: 80px; /* height of your sticky header */
}

this affects all scroll-to-anchor behavior including hash navigation, scrollIntoView(), and native fragment navigation. the browser accounts for the padding when calculating where to scroll.

alternatively, if you only want specific elements to offset:

[id] {
  scroll-margin-top: 80px;
}

both work with TanStack Router's hash scrolling since the browser handles the offset natively at the scroll level. supported in all modern browsers.

ref: MDN scroll-padding-top

[Leong-Qi-Jin]

Thank you so much. Never thought of using this. Appreciate it

[sunnypatell]

yeah scroll-padding-top is one of those CSS properties that flew under the radar for years while everyone was writing JS scroll offset hacks. works great with sticky headers since the browser handles the math natively. mind marking this as answered so it shows up for others with the same setup?