How To Smooth Scroll in React - Smooth Scrolling Tutorial

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

[@Amaterasu469]

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

[@codecommerce]

Thank you sir!

[@PRANAVPRAKASH-y7s]

Thanks for this video. Kudos!!

[@TheMatriiKz]

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

[@codecommerce]

Can be pretty easy fix :)

[@muhammadjonnazarov146]

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

[@augustine_edeh]

Found this super-duper helpful. Thanks man!

[@gamingcave4386]

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

[@anarosol6133]

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

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

[@redYELL0Wblue]

Thank you for the video! Very much appreciated!

[@codecommerce]

You’re awesome!

[@jpcc1223]

thats exactly what i was looking for! thanks man

[@codecommerce]

Thank you Joao

[@amannambisan6870]

Thank you for this! saved my life!!

[@DIEGORAMIREZ-b4e]

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

[@tanmaysankpal2335]

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

[@codecommerce]

Happy to help

[@jonasbjrnpedersen2130]

Thank you so much for this! A great help!

[@codecommerce]

Thank you my friend!

[@pedrobrandao23]

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

[@thesunofodin]

Thank you, this helped tremendously!

[@em01234567]

Honestly the best video on this topic!

[@nguyenthanhphongk17hcm81]

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

[@nhuytruong2796]

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

[@anantheswar9048]

clean and clear!

[@DuminoreDev]

Awesome, thank you!

[@MehndiBySoukayna]

yesssss man thank you!!!!!

[@joshuaberrios]

Thanks so much brother. Awesome tutorial!

[@codecommerce]

My pleasure dude!

[@omkarpawar7009]

U made it simple man ur subscribers are well deserved

[@fhkodama]

Great video! :)

[@codecommerce]

Thanks man!

[@Coderruhit]

just wow awesome explain thanks 😍

[@nihadyaqublu2359]

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

[@abdulsamman2229]

mascha Allah, always explained very clear tip top

[@codecommerce]

Many many thanks

[@amatakchannel3735]

Short and easy to follow thanks

[@codecommerce]

Thanks!

[@dewasembiring7286]

Thanks bro, you made it easy!

[@codecommerce]

Glad it helped!

[@quanghuynguyen3356]

very helpful, thank you so much

[@developedbyvarun]

Amazing!

[@decide5357]

Wow... Really awesome

[@ASHOKKUMAR-vx1uh]

Thanks man realy helpful

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

[@ubraun07]

amazing content!

[@codecommerce]

Thank you my friend!

[@devfren]

so good thankyou!

[@codecommerce]

Thank you!

[@afe5953]

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

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

[@rafihasan4061]

Thanks for the video...Thanks a lot

[@codecommerce]

Thanks dude!

[@karankhaira8497]

Thanks man.

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

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

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

[@fatimaiqra2169]

thanks a lot!

[@truewisdom1123]

Thanks alot ❤

[@azeezabass288]

You really saved my ass today

[@smartfastplan2188]

Thank you so much sir

[@CanaldoSiloks]

Thank u man

[@romariojs94]

Thanks alot!

[@codecommerce]

You're welcome!

[@mustangboy3533]

Thanks 😊❤

[@christeneyeshua4559]

this helped a lot Tq

[@ygaaaoo]

thanks my brother

[@shubha.tshubha.t8997]

THUMBS UP

[@vijayvj5490]

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

[@codecommerce]

Thank you!

[@nedagholami374]

thanks. very good

[@anantjain9679]

can we change the route on scrolling like active nav items

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

[@fakhruddinshovon8385]

really that's nice

[@Tech_legend-gd3fx]

How did u add the tab indicator to the page?

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

[@Nilesh-y3b]

Thanks i understand

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

[@cristiandanielherrera4349]

Very good

[@PeriklesPeriklesoglu]

thank you

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

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

[@Rob-J-BJJ]

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

[@flavio5693]

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

[@codecommerce]

That would be cool

[@festuskoech6612]

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

[@codecommerce]

Glad to help dude!!

[@ArthurBielenberg]

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

[@venkateshjajula5711]

I got my solution here ! Tq

[@codecommerce]

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

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

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

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

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

[@ДмитроКвітчатий]

thx

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

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

[@RideorDyna]

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

[@s1art7]

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 :)

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

[@kunwarpreetsingh8314]

why it's not working on my website

[@zeddscarlxrd4331]

ur such amazing

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

[@zappist751]

THANK YOU LORD THANK YOU JESUS AND THANK YOU SIRRRR

[@codecommerce]

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

[@CrazyGunner782]

3:40

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

[@fhrmk]

thank you