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

[@muhammadjonnazarov146]

Thanks alot bro, Great video.
Very short, simple and clear way of explaining.

[@deborahsanchez9607]

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

[@codecommerce]

You bet! I’m glad you got it sorted out Deborah!

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

[@augustineedeh3565]

Found this super-duper helpful. Thanks man!

[@omkarpawar7009]

U made it simple man ur subscribers are well deserved

[@thesunofodin]

Thank you, this helped tremendously!

[@afe5953]

Thank you. very short and concise explanations I like it.

[@Amaterasu469]

Thx man, i watch your vids from a while and i just want to say they helped so thanks

[@codecommerce]

Thank you sir!

[@anarosol6133]

Just what I needed. Thanks!!!!!!

[@pedrobrandao23]

Thank you for the video, helped me a lot! Got one more subscriber

[@nhuytruong2796]

Thank you very much for this great content. It work!

[@em01234567]

Honestly the best video on this topic!

[@amannambisan6870]

Thank you for this! saved my life!!

[@anantheswar9048]

clean and clear!

[@redYELL0Wblue]

Thank you for the video! Very much appreciated!

[@codecommerce]

You’re awesome!

[@jonasbjrnpedersen2130]

Thank you so much for this! A great help!

[@codecommerce]

Thank you my friend!

[@graysonharvey6933]

HUGE thank you! Redoing my portfolio and was stuck on this issue. You demo'd clearly and concisely. Cheers!

[@guscarrillo5497]

On that boat as well!

[@tikit601]

me too

[@decide5357]

Wow... Really awesome

[@developedbyvarun]

Amazing!

[@user-nr2og8ol4e]

just wow awesome explain thanks 😍

[@jpcc1223]

thats exactly what i was looking for! thanks man

[@codecommerce]

Thank you Joao

[@quanghuynguyen3356]

very helpful, thank you so much

[@TheMatriiKz]

Thanks so much! redoing my previous portfolio that was Angular into React and ran into this issue.

[@codecommerce]

Can be pretty easy fix :)

[@DuminoreDev]

Awesome, thank you!

[@ASHOKKUMAR-vx1uh]

Thanks man realy helpful

[@joshuaberrios]

Thanks so much brother. Awesome tutorial!

[@codecommerce]

My pleasure dude!

[@truewisdom1123]

Thanks alot ❤

[@user-un7bf7gj3o]

Thank you, you helped me a lot...
Greetings from Mexico.. :)

[@amatakchannel3735]

Short and easy to follow thanks

[@codecommerce]

Thanks!

[@CanaldoSiloks]

Thank u man

[@mustangboy3533]

Thanks 😊❤

[@fatimaiqra2169]

thanks a lot!

[@dewasembiring7286]

Thanks bro, you made it easy!

[@codecommerce]

Glad it helped!

[@fhkodama]

Great video! :)

[@codecommerce]

Thanks man!

[@christeneyeshua4559]

this helped a lot Tq

[@julielai2305]

I've been struggling finding how to scroll to another # without changing the URL. Thank you so much for sharing this!

[@codecommerce]

You're welcome!

[@JS_Jordan]

so good thankyou!

[@codecommerce]

Thank you!

[@nedagholami374]

thanks. very good

[@smartfastplan2188]

Thank you so much sir

[@fakhruddinshovon8385]

really that's nice

[@user-zx2xt5bz3x]

Thanks i understand

[@tanmaysankpal2335]

Thank You soo much brooo.....I spent hours on trying various way

[@codecommerce]

Happy to help

[@rafihasan4061]

Thanks for the video...Thanks a lot

[@codecommerce]

Thanks dude!

[@PeriklesPeriklesoglu]

thank you

[@ubraun07]

amazing content!

[@codecommerce]

Thank you my friend!

[@cristiandanielherrera4349]

Very good

[@ygaaaoo]

thanks my brother

[@abdulsamman2229]

mascha Allah, always explained very clear tip top

[@codecommerce]

Many many thanks

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

[@pratik1439]

thanks sir😊😊😊😊😊😊😊😊😊😊

[@yuutotokuda4309]

Thank you for the great video.
I have one question. I am creating header that jumps to desired contents with the link in header, but I have no idea how to make the header component responsive. I am using react-bootstrap and I have already made header with it. I would like to know how to make the header made in bootstrap with react-scroll.

[@ArthurBielenberg]

Спасибо большое, Клинт 🙏

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

[@Adam-vm6tc]

Thank you I've been working on this for 3 days and also trying to get ugly hash out of the url with the link. I had no idea this package existed.

[@user-re7xn4rv6l]

thx

[@vijayvj5490]

really good one help full for me
🌹🌹🌹🌹🌹

[@codecommerce]

Thank you!

[@shubha.tshubha.t8997]

THUMBS UP

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

[@jeckjonny6448]

Hello, thank you very much for the video. There is a question, how can I make this approach so that when the page is reloaded, the scroll will automatically go to the top and not be saved in the active section of the page?

[@venkateshjajula5711]

I got my solution here ! Tq

[@codecommerce]

Awesome dude!

[@frontendwithsalimi]

Is this work also when i click on the link
When i click on the link i go down to the section and the active change depending on it?

[@khalediman9740]

Thank you for the helpful video you've made. However, I have an issue with hiding the Id from the URL, I mean when I navigate to a specific section inside the same page I don't want the section Id to appear after the localhost:3000, like for example localhost:3000/#About. I've tried to use the hashSpy from react-scroll library, however it didn't' work, so can someone help me with that?

[@anantjain9679]

can we change the route on scrolling like active nav items

[@zeddscarlxrd4331]

ur such amazing

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

[@dominnumb6367]

Hey man! Really nice video,
I just have one question. I need to do automatic scrolling if I get new message. I handle to get new div with special ID, that's all good. But how I can make for example function, and everytime I will run it, It will do automatic that ?
I hope you understand what I mean and Thank you!

[@codecommerce]

I'm sorry, I don't think I am 100% following. Are you referring to an onClick event that could trigger a function to scroll to a specific part of the page?

[@Rob-J-BJJ]

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

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

[@Sahrawiyun]

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

[@codecommerce]

Thank you for the feedback - I will definitely try this. :)

[@julianafb1245]

BOOM! Worked, without changing anything in my code. Thank you!

[@s1art7-vu5pl]

@@kalahari8295 u need set important!, because the browser have a default scroll-behavior

[@paschalokafor9043]

It works but it will keep reloading your page which u dont need in your react app since it is a Single Page App

[@tomasburian6550]

Thor himself has descended from Asgard to teach us code!
Works great, thanks a lot. So if I got this right, it can't handle switching to another page & then scroll?

[@codecommerce]

HAHA so awesome- thanks dude! That's a great question - I bet we can swing that! I'll play around with it.

[@nicolassuarez2933]

Outstanding! How to scroll on page load without a click? useEffect maybe? thanks!

[@escuderomdz]

I used ' const handleWindowsLoad = () => {
scroll.scrollToTop();
setActiveSection('home');
};
window.addEventListener('load', handleWindowsLoad);'
Maybe this work for you too

[@devrook]

What if you want to use { Link } from react-router-dom as well? It gives errors with the two imports being the same

[@bowmasterish]

I imagine you'll probably have to import one using the 'as' keyword to change the name of your import

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

[@festuskoech6612]

I came, found the source code, I hit the like button, subscribe button... and byeeeeeee! Thanks!

[@codecommerce]

Glad to help dude!!

[@cjt9150]

Thanks, subscribed & liked, the one thing i want to know, how to use this react-scroll with react-router-dom v6, both have Link tag??, kindly give a solution

[@codecommerce]

I would advise using only one feature on a specific page. This would clear up that issue.

[@souloomonkey1360]

You can import Link as LinkRouter for example it will just re-name it .

[@s1art7-vu5pl]

hi, why not use the property css. scroll-behavior: smooth;? good practices?
but this package doesn't change the url, thats perfect for single page app, like a portfolio maybe... thx

[@codecommerce]

You’re right :)

[@flavio5693]

can you make a project with React and GraphQL? maybe a CRUD project with backend end React Typescript?

[@codecommerce]

That would be cool

[@RoamingIowa]

What would I do if I have a contact page that is separate from the home page? I want to navigate to certain sections on the home page from the contact page.

[@gauravjaiswal7296]

use react router dom library for ur code

[@kunwarpreetsingh8314]

why it's not working on my website

[@CrazyGunner782]

3:40

[@zappist751]

THANK YOU LORD THANK YOU JESUS AND THANK YOU SIRRRR

[@codecommerce]

Thank you! Also you can use “scroll-behavior” in CSS :)

[@vigneshkundar467]

```Just use this one line of css```
inside public/index.html
html {
scroll-behavior: smooth;
}

[@pedrovictorsaraiva8705]

Doesn't work in React

[@Salmankhan_38827]

Hah just apply scroll-behaviour : smooth; in css and you are done.

[@ouailtayarth4012]

When you click on each nav bar to navigate to a specific section, the link renders localhost:3000/#about. It didn't change the name of that section localhost:3000/#demo. What changes should be made to fix that? Thanks for your efforts Man!!

[@mohamed404eg]

// go to section
if (window.location.pathname === "/Projects") {
console.log(
document.querySelector("#Projects").getBoundingClientRect().top
);
}
window.scrollTo({
top: document.querySelector("#Projects").getBoundingClientRect().top,
left: 0,
behavior: "smooth",
});
}

[@NeerajKumar-wk4qq]

Thank you so much sir

[@romariojs94]

Thanks alot!

[@codecommerce]

You're welcome!

[@fhrmk]

thank you