Smooth Scroll to an Element in React
Vložit
- čas přidán 3. 01. 2024
- 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
Tutorial: spacejelly.dev/posts/how-to-s...
Code: github.com/colbyfayock/my-scr...
Demo: my-scrolling.vercel.app/
📺 CZcams: czcams.com/users/colbyfayock?sub_c...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayock.com/newsletter/
🎥 What I Use: www.colbyfayock.com/uses
#colbyfayock #reactjs #ux #webdevelopment - Věda a technologie
Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course
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 🤘
Thanks for the kind words! Glad it was helpful 🙌
Always wonderful stuff from you, Colby! I love when you cover browser APIs like this.
thanks alex! definitely want to explore more in this area, think its especially interesting with all the cool APIs that have been popping up lately
Thanks Colby, loved this!
no problem! glad you found it helpful 😁
Your voice is so calming, awesome tutorial
thank you 😁
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
Just subscribed!
Thanks Colby, you are a true hero
no problem 🫡
It helped me a lot! Thanks.
no problem!
Great video, so well explained
Thank you!
Awesome video man 👏 Subbed 🎉
thank you!!
wow.. I've been looking forever for you my guy..
🙌
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
sectionRef.current?.scrollIntoView({
behavior: 'smooth',
block: 'start',
});
setTimeout(() => {
setCurrentPageNum((curr) => curr + 1);
}, 500);
I've basically time-outed the execution of setCurrectPageNum() after the scrollIntoView took place.
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?
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 😂
hey there! i dont know that i have any Typescript-specific tutorials planned, is there something specific you'd like to see?
You could also use `scroll-behavior: smooth;` CSS declaration at 0:27 and get rid of all this JS complexity.
great solution!! definitely useful to have different options available depending on the use case
How do you do it when the div where you want the page to scroll is inside another component?
hey im not totally following, any chance you hvae an example?
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.
yeah thats an interesting one as that's kind of what I would expect, in that the scrolling action would still fire a scroll listener. does the instant experience not also triger it? a quick test in my console log just playing around on this youtube page and .scroll(0,1000) triggered an event with window.addEventListener('scroll'...)
i just did a quick search and not seeing anything about triggering on finish or any kind of given time for it to finish which is apparently not constant to spec
also looks like the event doesnt have any unique information about what triggered it
feels a bit complicated but perhaps before triggering, you can store a ref that states you're going to perform the scroll then once you get the the scroll location, the scroll listener sets that back off or something. not sure 🤔
But what if div that i want scroll to located in another component from scroll button
you could use a standard ID string to handle that, or you can lift up the ID to the lowest common parent but that may be a lot depending on the use case
@@colbyfayock thanks !
Hi space jelly and thanks. You do have a good voice.
thank you 😁
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
window.location.hash gives you that value but not sure if thats what you mean?
@@colbyfayock yeah i will hash like that but the scrolling was giving headache. The app router, scroll to top on link click, link on same page and different page, router refresh all these was caused problems. Now somehow it's working as intended.
Thanks by the way
please make a video how we can navigate to a particular page onClick the navbar element
do you mean page routing and links to those pages? you might be interested in this video i did where i used Wouter: czcams.com/video/nvGhGSmEQZU/video.html
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.
also a good solution!
This is the kind of short tutorial that never works when u really need it in project.
did this not work somewhere?... its a browser API, the only way it wouldn't be available is if you're using a browser that doesn't support the API, is that the case? it has pretty good support... caniuse.com/?search=scrollintoview
@@colbyfayock I was saying, try this example works perfect... if tomorrow I stuck on problem like this, which varies from the implementation, I will lose 3 days to make it work... happening most of the time...