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.
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?
I used ' const handleWindowsLoad = () => { scroll.scrollToTop(); setActiveSection('home'); }; window.addEventListener('load', handleWindowsLoad);' Maybe this work for you too
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
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?
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
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...
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?
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
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.
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?
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!
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?
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.
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!!
I''ve been dealing with this for 3 days and you made it so easy! thank u so much!
You bet! I’m glad you got it sorted out Deborah!
Thanks so much! redoing my previous portfolio that was Angular into React and ran into this issue.
Can be pretty easy fix :)
Thanks alot bro, Great video.
Very short, simple and clear way of explaining.
Found this super-duper helpful. Thanks man!
Thank you for the video. I have been trying to get this work since last three days.
Just what I needed. Thanks!!!!!!
Thank you, you helped me a lot...
Greetings from Mexico.. :)
clean and clear!
Thx man, i watch your vids from a while and i just want to say they helped so thanks
Thank you sir!
Short and easy to follow thanks
Thanks!
mascha Allah, always explained very clear tip top
Many many thanks
just wow awesome explain thanks 😍
Honestly the best video on this topic!
Thank You soo much brooo.....I spent hours on trying various way
Happy to help
Thank you for this! saved my life!!
Thank you, you are my life saver, Ive been struggling with this for 2 days 🤩
Awesome, thank you!
Thank you for the video! Very much appreciated!
You’re awesome!
thats exactly what i was looking for! thanks man
Thank you Joao
yesssss man thank you!!!!!
Another way of achieving this in modern browsers is to set the css scroll-behavior of the html/body to smooth.
Thank you for the feedback - I will definitely try this. :)
BOOM! Worked, without changing anything in my code. Thank you!
@@kalahari8295 u need set important!, because the browser have a default scroll-behavior
It works but it will keep reloading your page which u dont need in your react app since it is a Single Page App
U made it simple man ur subscribers are well deserved
Thank you for the video, helped me a lot! Got one more subscriber
I've been struggling finding how to scroll to another # without changing the URL. Thank you so much for sharing this!
You're welcome!
Thank you, this helped tremendously!
Thank you very much for this great content. It work!
HUGE thank you! Redoing my portfolio and was stuck on this issue. You demo'd clearly and concisely. Cheers!
On that boat as well!
me too
Thanks so much brother. Awesome tutorial!
My pleasure dude!
Thanks man.
Great video! :)
Thanks man!
You really saved my ass today
Thank you so much for this! A great help!
Thank you my friend!
Wow... Really awesome
Amazing!
very helpful, thank you so much
Thank you very much for this great content. Really helped !
Thanks bro, you made it easy!
Glad it helped!
thanks my brother
amazing content!
Thank you my friend!
Thank you. very short and concise explanations I like it.
Thanks man realy helpful
Thanks 😊❤
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
really that's nice
so good thankyou!
Thank you!
thanks a lot!
THUMBS UP
really good one help full for me
🌹🌹🌹🌹🌹
Thank you!
Very good
Thank u man
Thanks alot ❤
Thanks for the video...Thanks a lot
Thanks dude!
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.
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.
Thank you so much sir
thank you
Thanks i understand
thanks. very good
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?
this helped a lot Tq
Outstanding! How to scroll on page load without a click? useEffect maybe? thanks!
I used ' const handleWindowsLoad = () => {
scroll.scrollToTop();
setActiveSection('home');
};
window.addEventListener('load', handleWindowsLoad);'
Maybe this work for you too
Thanks alot!
You're welcome!
I came, found the source code, I hit the like button, subscribe button... and byeeeeeee! Thanks!
Glad to help dude!!
thanks sir😊😊😊😊😊😊😊😊😊😊
Спасибо большое, Клинт 🙏
I got my solution here ! Tq
Awesome dude!
thx
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
```Just use this one line of css```
inside public/index.html
html {
scroll-behavior: smooth;
}
Doesn't work in React
can we change the route on scrolling like active nav items
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?
can you make a project with React and GraphQL? maybe a CRUD project with backend end React Typescript?
That would be cool
THANK YOU LORD THANK YOU JESUS AND THANK YOU SIRRRR
Thank you! Also you can use “scroll-behavior” in CSS :)
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
I would advise using only one feature on a specific page. This would clear up that issue.
You can import Link as LinkRouter for example it will just re-name it .
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
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?
HAHA so awesome- thanks dude! That's a great question - I bet we can swing that! I'll play around with it.
ur such amazing
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
You’re right :)
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.
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?
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?
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?
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!
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?
What if you want to use { Link } from react-router-dom as well? It gives errors with the two imports being the same
I imagine you'll probably have to import one using the 'as' keyword to change the name of your import
why it's not working on my website
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.
use react router dom library for ur code
3:40
Hah just apply scroll-behaviour : smooth; in css and you are done.
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!!
// 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