How To Smooth Scroll in React - Smooth Scrolling Tutorial

In this video I show you how to implement smooth scrolling in React JS. I do this by using the "react-scroll" package. This is built on top of a previous React tutorial I put out. You can either implement this into your own project or if you want to clone my github repository then please feel free!
Would love to hear any comments or questions from you guys!
Thank you for watching.
ZeroTo Mastery:
- Master React JS Course - bit.ly/Learn-React-JS
- Complete Web Developer in 2023 - bit.ly/Complete-Web-Developer...
Coding Challenges!
bit.ly/Code-Challenges
Github repo for this project:
github.com/fireclint/execute-...
If you want to build this entire React app from the beginning then you may find the video here:
• React Website Beginner...
☕ Buy me a Coffee ☕
www.buymeacoffee.com/clintbriley
Instagram 💪
/ fireclint
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj

[@Sahrawiyun]

Another way of achieving this in modern browsers is to set the css scroll-behavior of the html/body to smooth.

[@escuderomdz]

Hello! Thanks for this, it's great! But I have a problem because, for example, if I am in the 'demo' section and I click on the 'home' section, the css style for the 'active' class is applied on top of 'demo', then 'testimonials', then ' about' and then 'home', but the idea is that the 'active' class applies only to the section I click on. Do you know what I'm doing wrong or what is the solution?

[@farhana5499]

I don't know why my scroll element is weird. it keeps scrolling to the bottom of the clicked element, instead of showing it from the top ;(. Please help...

[@kunwarpreetsingh8314]

why it's not working on my website

[@zappist751]

THANK YOU LORD THANK YOU JESUS AND THANK YOU SIRRRR

[@kedarmakode5664]

Hi, I created react app using vite and i am using tailwindcss for styling. I followed your tutorial still its not working. I even tried with tailwind class for smooth scrolling. Can anyone please help

[@pete531]

Hi, this works only second time click after fresh page reload. on the initial click the offset will be messed up but on second click perfect

[@Rob-J-BJJ]

whenever I hover over the button the mouse icon turns into the typing icon how do I fix this

[@MegaMetallica4ever]

Thank you so much for this video, but can you tell me how to make a path display in the url. I have no problem achieving all of this when I have a multipage app.

[@m__link6499]

I Ve tried to use it with Next js but it seems like there is a conflict with the Link component from Next js…How can I implement it in Next Js please?

[@muhammadjonnazarov146]

Thanks alot bro, Great video.

[@deborahsanchez9607]

I''ve been dealing with this for 3 days and you made it so easy! thank u so much!

[@nguyenthanhphongk17hcm81]

Thank you, you are my life saver, Ive been struggling with this for 2 days 🤩

[@gamingcave4386]

Thank you for the video. I have been trying to get this work since last three days.

[@nihadyaqublu2359]

Thank you very much for this great content. Really helped !

[@omkarpawar7009]

U made it simple man ur subscribers are well deserved

[@augustineedeh3565]

Found this super-duper helpful. Thanks man!

[@thesunofodin]

Thank you, this helped tremendously!

[@em01234567]

Honestly the best video on this topic!

[@amannambisan6870]

Thank you for this! saved my life!!