How To Smooth Scroll in React - Smooth Scrolling Tutorial 

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

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

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

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

Found this super-duper helpful. Thanks man!

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

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

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

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

mascha Allah, always explained very clear tip top

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

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

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

Thank you for this! saved my life!!

Thank you for the video! Very much appreciated!

just wow awesome explain thanks 😍

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

U made it simple man ur subscribers are well deserved

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

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

Thank you, this helped tremendously!

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.

clean and clear!

Short and easy to follow thanks

thats exactly what i was looking for! thanks man

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

Awesome, thank you!

Honestly the best video on this topic!

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

Thanks so much brother. Awesome tutorial!

Thank you so much for this! A great help!

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?

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

very helpful, thank you so much

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

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

Thanks bro, you made it easy!

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

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

You really saved my ass today

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?

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

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?

Wow... Really awesome

Thanks man realy helpful

Thanks alot ❤

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?

Thank you so much sir

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.

Great video! :)

so good thankyou!

Amazing!

Thanks 😊❤

thanks my brother

can we change the route on scrolling like active nav items

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

Thanks for the video...Thanks a lot

thanks a lot!

amazing content!

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

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

Thank u man

really that's nice

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

Thanks i understand

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?

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

thanks. very good

thank you

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

this helped a lot Tq

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.

Very good

Thanks alot!

THUMBS UP

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.

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?

why it's not working on my website

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!

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

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

I got my solution here ! Tq

thx

THANK YOU LORD THANK YOU JESUS AND THANK YOU SIRRRR

ur such amazing

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

3:40

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

// 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", }); }

Thank you so much sir

thank you