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!
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 🤘
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.
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 😂
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
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?
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 🤔
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
@@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
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.
do you mean page routing and links to those pages? you might be interested in this video i did where i used Wouter: th-cam.com/video/nvGhGSmEQZU/w-d-xo.html
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...
Learn how to build a full stack Next.js app in my upcoming course: colbyfayock.com/course
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!
appreciate the kind words! let me know if you search for something and can't find good content ;) always looking for new ideas
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
Your voice is so calming, awesome tutorial
thank you 😁
Simple, quick, easy to understand! Great video! Cannot wait to check the rest of them! +1 sub!
thank you!
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
Thank-you for the video! Simple and elegant solution and very well explained.
no problem!
Are you also able to smooth scroll with an href?
Thanks Colby, you are a true hero
no problem 🫡
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.
Thanks Colby, loved this!
no problem! glad you found it helpful 😁
wow.. I've been looking forever for you my guy..
🙌
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?
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 !
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?
It helped me a lot! Thanks.
no problem!
Awesome video man 👏 Subbed 🎉
thank you!!
Great video, so well explained
Thank you!
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 🤔
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
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!
Hi space jelly and thanks. You do have a good voice.
thank you 😁
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: th-cam.com/video/nvGhGSmEQZU/w-d-xo.html
I just use scroll-behaviour: smooth; that's it
nice!
Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news
Just subscribed!
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...