Smooth Scroll to an Element in React

Learn how to smooth scroll to an element, the top of the page, or a custom location with JavaScript APIs scrollIntoView, scroll, and scrollBy methods.

We'll walk through how to trigger scrolling methods programmatically in a react app including scrolling to an element with scrollIntoView, scrolling to the top of the page with scroll and scrollTo, and scrolling page by page based on dynamic viewport height with scrollBy.

🧰 Resources

#colbyfayock #reactjs #ux #webdevelopment

[gerardsiles]

Every time I need to do something new on the front end side that I haven't done before, I find a video where you explain it. You are amazing, and I'm extremely grateful for you sharing your knowledge and the way that you do it.
Blessings!

[tocube]

Buttery smooth scroll with buttery smooth explanations and all the little details and references, on point and without wasting time.
thanks man. top notch content 🤘

[MarinaEbbecke]

Thank-you for the video! Simple and elegant solution and very well explained.

[TrostCodes]

Always wonderful stuff from you, Colby! I love when you cover browser APIs like this.

[bandekhoda]

Your voice is so calming, awesome tutorial

[Polynook]

You could also use `scroll-behavior: smooth;` CSS declaration at 0:27 and get rid of all this JS complexity.

[mateusloubach]

wow.. I've been looking forever for you my guy..

[fran_sar]

Hi from Argentina! The very end of South America.
Despite the topic of this video is awesome by itself I can see that you have an excellent React Typescript domain.
Do you have any plan for tutorials about it?
Sorry if my English looks kind of weird 😂

[AlexLozada]

Why not use the traditional div id="contact" and then "a" tag with the href="#contact" and in the main index.css file just put at the universal selector * { scroll-behavior: smooth }. It works exactly the same.

[quanghungpham]

This is cool man.
I actually tried these scroll methods, and my experience is that they cannot be used along with "scroll" EventListnener. Because it's provoked every time I scroll, the section will freeze and I cannot scroll to different section. It's also doesn't work with behavior: smooth too.

[eleah]

Hi space jelly and thanks. You do have a good voice.

[piotrszczesniak]

I needed smooth scroll together with a pagination, so whenever I changed the page scrollIntoView() couldn't work as expected. What I've done is this


behavior: 'smooth',
block: 'start',
});
setTimeout(() => {
setCurrentPageNum((curr) => curr + 1);
}, 500);

I've basically time-outed the execution of setCurrectPageNum() after the scrollIntoView took place.

[dev_insights]

I just use scroll-behaviour: smooth; that's it

[asifrahman]

please make a video how we can navigate to a particular page onClick the navbar element

[Rando]

this is cool I want to implement it in my app. But I have the header in my App.tsx, and I have two sections (each in a component) and I want the user to jump to from buttons in the header. how can I do that?

[bagel-minecraft-videos]

But what if div that i want scroll to located in another component from scroll button

[KingOfChaz]

How do you do it when the div where you want the page to scroll is inside another component?

[KSalvatore]

Can you also tell how can i get hash from url then scroll to div with same hash id. I want to use it nextjs. I found many solution and tried some tricks nothing works perfectly. Please

[MrEnsiferum]

This is the kind of short tutorial that never works when u really need it in project.