Use React to Scroll to Specific Section on Your Website

In this video, I show you how to use react to scroll to specific sections of your website. When you build a website with a single page, a user can navigate to specific section using clicks. We use the full power of JavaScript in this tutorial.
----------
Link to Github repository
👉 github.com/iAthman83/use-reac...
----------
Introduction to React 👉 • Introduction to Modern...
Routing with React 👉 • React Router - Introdu...
----------
Follow on Twitter 👉 / iathman83
Connect on LinkedIn 👉 / abubakar-athman-680015140
----------
Subscribe to my channel 👉 / @programwithabu
______
☕️Buy me coffee 👉 www.buymeacoffee.com/iathman83
----------
Chapters
00:00 Introduction
01:12 Setup vscode
01:30 Create navigation menu
04:21 Create sections
06:00 Adding Scroll effects
10:18 Implement back to top button
19:04 Wrap up
#reactjs #scroll #node #javascript #DOM

[@craigjohnson8279]

I never had a need for useRef's before this video. Now I see how useful they are when scrolling to a section. Great video Abu! :)

[@programwithabu]

Than you so much (: I’m glad you can now think about how to use in your next project! It’s an awesome hook used if there’s no need to re-render a component, like in this case!

[@asselyembergenovasdu6970]

Really cool👍👍👍👍

[@Najettechou]

Thank you so much! This was really really helpful and very easy to follow.

[@faainamacaldera5125]

thank you sir, you're explanation is so clear and i can understand it easily

[@rukiayusuf3502]

Wonderful tutorial Maashallah

[@user121304]

I need this in my project currently. Will try it tomorrow. Thanks ! Can more react and typescript tutorials plz 😊

[@isaacotim1955]

dude your videos are really awesome.....u have made REACT easy for me to master

[@programwithabu]

Thank you for your kind words. I hope with this and my other tutorials can help you get started with your projects

[@gunnn269]

Thanks bro. For these easy and clear explanations

[@aaaliii4u]

its a great a easy to follow tutorial, but you did not remove the event in the useEffect. you should remove that event so when the component is closed that event is also closed. Thank you for such a good lecture :)

[@mdrezaulkarim4707]

Very usefull video

[@thomasalmeida9823]

I will implement it now in my project! Thank you, and by the way, you have great teaching skills.

[@programwithabu]

Thank you so much for your kind words And I’m so glad I could help

[@faugofficial4891]

Thanks man you explained it so easily

[@KishanKumar-cz9cy]

thanks man for such kind of videos, it is really helpful for me...

[@znkdev]

Thanks, helped a lot!

[@ankitchauhan8682]

to the point, thanks

[@aviroxi]

Thank you!!

[@theanushka_v18]

Thank you so much Abu for explaining this, this will help me to apply in my portfolio website.

[@programwithabu]

We’re most welcome, I’m glad I could help The video below might also help, where I show how to forward ref from one component to another kzbin.info/www/bejne/lXiYg6uwra-taqMsi=KCDBupMYFgbvxEwO

[@bedsidetable]

Very helpful video Abu! Thank you so much

[@programwithabu]

Glad I could help. this might also be helpful kzbin.info/www/bejne/lXiYg6uwra-taqM

[@999slawter]

Thank you very much! :)

[@user-cc1ef1xp3x]

Thank you brother!

[@chiamakaorakwe8776]

This was a very detailed tutorial with exceptional way of explaining hooks, thank you very much

[@programwithabu]

Glad I could help!

[@programwithabu]

kzbin.info/www/bejne/lXiYg6uwra-taqM I also explain how to forward ref from on component to another using the link above

[@timmulwanyi5980]

Great work MUST OB

[@programwithabu]

Thank you dude

[@eduardoleitzke5803]

very nice! great video, really usefull! thanks from Brasil

[@programwithabu]

Thanks Eduardo for your support all the way from Brazil

[@josephsutcliffe9141]

Works perfect, thanks mate 😁

[@programwithabu]

I'm glad I could help Here another video if you want to forward a ref from one component to another kzbin.info/www/bejne/lXiYg6uwra-taqM

[@molomekeys3938]

thank you very much

[@ahmedsarhan3088]

woooow, amazing tutorial

[@programwithabu]

Thank you Ahmed I'm glad i could help

[@PhoneyPatjordan]

Thank you! This was very helpful!

[@programwithabu]

Glad I could help

[@mgpyaegyi6591]

Love ❤ it guy keep moving

[@programwithabu]

Thank you 😊

[@mariafernandaabreufonseca9640]

That was helpful. Thank you

[@programwithabu]

Glad I could help This might also be helpful kzbin.info/www/bejne/lXiYg6uwra-taqM

[@ife9556]

Very clear explanation, thank you

[@programwithabu]

I’m glad I could help!

[@Joel-nz1gd]

Thank you for the step by step explanation

[@programwithabu]

The video below might also help, where I show how to forward ref from one component to another kzbin.info/www/bejne/lXiYg6uwra-taqMsi=KCDBupMYFgbvxEwO

[@maryamhabibpoor2356]

that was very helpful for me. tank u

[@programwithabu]

Awesome!!! I’m glad I could help!

[@DnsMenjivar]

10/10

[@revasseurborn2000]

Thank you so much I wasted almost three days on this !

[@programwithabu]

You’re very welcome! I’m glad I could help If you also wanna pass this ref between component here’s my video for that kzbin.info/www/bejne/lXiYg6uwra-taqM

[@Rando327]

thank you for this tutorial, wonderfully explained. But what if each section is a component on its own? For example the Nav is a component, the About section is another component. and all of them gathered in the App.js! I'm having problems understanding how can I do it when each section is a component on its own, HELP :(.

[@nicetomeetugaming7024]

Best video

[@programwithabu]

Thank you so much, I'm glad I could help

[@mansichugh8129]

what is the use of usereef?

[@najeesimmons6648]

Thanks for this. How is this accomplished when the "sections" are in fat different components, as opposed to simply different divs?

[@programwithabu]

Hi Najee, sorry for late response... Basically you need to forward this ref using the forwardRef() hook to do this, great official article here from react. Le me know if this helps reactjs.org/docs/forwarding-refs.html

[@programwithabu]

Hi, Below is a video I made on how to accomplish this. I hope it helps kzbin.info/www/bejne/lXiYg6uwra-taqM

[@zakariyyaism]

Mumtaaz Maa Shaa Allah

[@aymanhaque]

How would I implement this if I have multiple components in my react page? For example, my page has a navbar.js file which is exported to app.js(and this also imports all the sections from other files/components). How could I implement this in that case?

[@programwithabu]

Hi, I created another video to solve this issue, you can find it on the link below kzbin.info/www/bejne/lXiYg6uwra-taqMsi=l75gYCqlR9_103TV How this helps out

[@momokee2394]

thank you! what do you suggest if i want to divide those sections into separate components?

[@programwithabu]

I’m sharing a video this week, on how to do this! Passing refs from one component to another

[@momokee2394]

@@programwithabu wohooo! looking forward to watching and learning more from you

[@programwithabu]

@@momokee2394 I promised a video to solve this, and here you go. I hope it helps kzbin.info/www/bejne/lXiYg6uwra-taqM

[@princewillduru7313]

Thank you for this. But I'm finding it hard to understand the forwardRef

[@programwithabu]

Hi, sorry for this late reply I made a video to help with this, follow the link below kzbin.info/www/bejne/lXiYg6uwra-taqM

[@ketankumar5689]

How to navigate to some other page present in my project after clicking a link present in my homepage where I have implemented react-scroll ? Please advise.

[@programwithabu]

Hi, I believe this video below that I made will help solve this kzbin.info/www/bejne/lXiYg6uwra-taqM

[@girijeshthodupunuri1300]

What do I do if the different sections are housed deep in custom components? How can i pass the ref from parent to deep nested child component?

[@programwithabu]

We’re most welcome, I’m glad I could help The video below might also help, where I show how to forward ref from one component to another kzbin.info/www/bejne/lXiYg6uwra-taqMsi=KCDBupMYFgbvxEwO

[@infomania_by_ayush7901]

Hey But what if I am trying to interrupt the scroll when user is scrolling up? How can I do that?

[@programwithabu]

Interrupting the scroll? The way this one is setup is that the scroll goes up to the top of the page. You can setup yours with the mouse listener event, if I understand your question correctly

[@user-hr3eb7wt2c]

How about if all my navbar items each one in a single folder and a I import them in app.js ??

[@programwithabu]

Hi, I made a new video to solve this issue kzbin.info/www/bejne/lXiYg6uwra-taqM

[@zaheeriqbal8245]

can i use (useRef) on routers help?

[@programwithabu]

Good question Zaheer I made a video just for this kzbin.info/www/bejne/lXiYg6uwra-taqM

[@healingwithlove8614]

I never done this like it i give the component a id and scroll to that id

[@programwithabu]

Interesting way of doing it too

[@zeke2269]

How to solve that white gap im a beginner

[@programwithabu]

Sorry for responding to your comment late, Which white gap? But I hope you figured it out by now (:

[@VanagilaRodrigues]

This solution does not work if you are componentizing. any clue?

[@programwithabu]

Here's a link to my new video on how you can forward a ref kzbin.info/www/bejne/lXiYg6uwra-taqM

[@mahdibackar7015]

what if the navbar is a defined in a separate component

[@muzamilrashid7265]

Same Question

[@programwithabu]

Hi Mahdi, sorry for late response... Basically you need to forward this ref using the forwardRef() hook to do this, great official article here from react. Le me know if this helps reactjs.org/docs/forwarding-refs.html

[@Anastasia_Zhuravleva]

@@programwithabu Hi ABu! Thank you so much for this video! i've been struggling for days to find the solution to scrolling within the same page and then I found your video. But I'm also using different components and even though I read the docs on forwardRef() I don't quite understand how the structure should be? I have a Parent component that has Header with nav links AND Sections that has these refs. Do i declare useRefs(null) in the parent component? as well as the function scrollToSection? or is it the other way around? If declaring useRefs and function in Header component, how do I pass refs from Sections in Parent component to Header? Please help I'll be very thankful

[@programwithabu]

@@Anastasia_Zhuravleva Hi, I made a video just for this, i hope it can help kzbin.info/www/bejne/lXiYg6uwra-taqM

[@programwithabu]

@@muzamilrashid7265 Here's a link to a video where you can forward a ref kzbin.info/www/bejne/lXiYg6uwra-taqM

[@poojarathour6035]

hey ! I created different components, I create a header, and imported them into pages, this approach not working please help me out.

[@programwithabu]

Great question Pooja! Basically you need to forward this ref to another component using the forwardRef() hook. Great article on how to do this here reactjs.org/docs/forwarding-refs.html I hope that helps, let me know

[@subaruLover475]

@@programwithabu can you do a video on this topic? would help a lot

[@programwithabu]

I have a video coming out this week on this topic, I’ll share it here!

[@programwithabu]

@@subaruLover475 I promised a video on this topic and here you go, I hope it will help kzbin.info/www/bejne/lXiYg6uwra-taqM

[@programwithabu]

Hi, I made a new video on this topic, I hope it can help kzbin.info/www/bejne/lXiYg6uwra-taqM

[@zeke2269]

Second one is not that easy bruh💀