How to scroll to section when it have image with dynamic height?

In the first access page, I want the page will be smooth scroll to the second section (my current logic is using react-scroll). In case each section have image, the scroll will stop somewhere between section 1 and 2. I think the image is not loaded yet. But from the second access, the scroll goes to the exact position I expect. You can try the code at this link: https://codesandbox.io/p/sandbox/awesome-parm-j2qy7v?file=%2Fsrc%2FApp.js%3A27%2C21 Tks for spending time to read my post.
awesome-parm-j2qy7v
CodeSandbox is an online editor tailored for web applications.
4 Replies
croganm
croganm2y ago
I'm not quite understanding what your issue is
krix2019
krix2019OP2y ago
You can watch the issue in the video I attached
Kevin Powell
Kevin Powell2y ago
Could you not just use an anchor link for this instead?
<a href="#section-1">Go to section one</a>
<a href="#section-1">Go to section one</a>
html {
scroll-behavior: smooth;
}
html {
scroll-behavior: smooth;
}
croganm
croganm2y ago
I mean it seems to work as intended. Like Kevin said, you could avoid JS all together if you're just scrolling to sections
Want results from more Discord servers?
Add your server