Offset doesn't work when newly navigating page with hash

[brightpixels]

Hello,

Demo: https://6vk5zm231k.codesandbox.io/

My page has a fixed header and offset is equal to its height, which works when clicking around within the page.

However if I navigate to the page with a hash (https://6vk5zm231k.codesandbox.io/#home, https://6vk5zm231k.codesandbox.io/#about, etc), I land on the section without the offset.

Any suggestions how to deal with this?

[willianrod]

Same problem here on version 1.7.11. Any suggestions?

[iknox27]

Any suggestions?

[willemmulder]

@brightpixels @willianrod @iknox27 You should use the CSS property scroll-margin-top for that. Works in all browsers, also without the react-scroll lib.

It would however be perfect if react-scroll would also respect those scroll margins so we wouldn't need to set a manual offset at all.