Smooth Scroll to an Element in React

Подписаться 27 тыс.

Просмотров 26 тыс.

50% 1

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/
📺 RU-vid: ru-vid.com?sub_c...
🐦 Twitter: / colbyfayock
📹 Twitch: / colbyfayock
✉️ Newsletter: www.colbyfayock.com/newsletter/
🎥 What I Use: www.colbyfayock.com/uses
#colbyfayock #reactjs #ux #webdevelopment

Наука

Опубликовано:

3 янв 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 45

@colbyfayock 6 месяцев назад

Get fresh tutorials and other free content straight to your inbox! colbyfayock.com/news

@hqasmei 6 месяцев назад

Just subscribed!

@tocube1 4 месяца назад

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 🤘

@colbyfayock 4 месяца назад

Thanks for the kind words! Glad it was helpful 🙌

@TrostCodes 6 месяцев назад

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

@colbyfayock 6 месяцев назад

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

@hqasmei 6 месяцев назад

Thanks Colby, loved this!

@colbyfayock 6 месяцев назад

no problem! glad you found it helpful 😁

@bandekhoda7801 6 месяцев назад

Your voice is so calming, awesome tutorial

@colbyfayock 6 месяцев назад

thank you 😁

@LucasGabrieldaSilva-bt1co 4 месяца назад

Thanks Colby, you are a true hero

@colbyfayock 4 месяца назад

no problem 🫡

@lukesoutherton6953 4 месяца назад

Great video, so well explained

@colbyfayock 4 месяца назад

Thank you!

@HarshDoes 6 месяцев назад

Awesome video man 👏 Subbed 🎉

@colbyfayock 6 месяцев назад

thank you!!

@Rando327 2 месяца назад

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?

@mateusloubach 3 месяца назад

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

@colbyfayock 2 месяца назад

🙌

@Polynook 6 месяцев назад

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

@colbyfayock 6 месяцев назад

great solution!! definitely useful to have different options available depending on the use case

@KingOfCha0z 3 месяца назад

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

@colbyfayock 3 месяца назад

hey im not totally following, any chance you hvae an example?

@fran_sar 6 месяцев назад

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 😂

@colbyfayock 6 месяцев назад

hey there! i dont know that i have any Typescript-specific tutorials planned, is there something specific you'd like to see?

@bagel-minecraft-videos 16 дней назад

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

@colbyfayock 15 дней назад

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

@bagel-minecraft-videos 15 дней назад

@@colbyfayock thanks !

@AlexLozada32 2 месяца назад

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.

@colbyfayock 2 месяца назад

also a good solution!

@KSalvatore 2 месяца назад

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 2 месяца назад

window.location.hash gives you that value but not sure if thats what you mean?

@KSalvatore 2 месяца назад

@@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

@asifrahman907 2 месяца назад

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

@colbyfayock 2 месяца назад

do you mean page routing and links to those pages? you might be interested in this video i did where i used Wouter: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-nvGhGSmEQZU.html

@quanghungpham269 6 месяцев назад

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.

@colbyfayock 6 месяцев назад

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 🤔

@eleah2665 6 месяцев назад

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

@colbyfayock 6 месяцев назад

thank you 😁

@MrEnsiferum77 6 месяцев назад

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

@colbyfayock 6 месяцев назад

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

@MrEnsiferum77 6 месяцев назад

@@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...