Great article, thanks. If you want to have the URL hashtag update as you cycle through, add something like " linkid='X' " to each a href, then add an onclick event to each link, where the parent.location.hash changes to the whatever the linkid attribute is . If you want to then add that in to the url's page history, use window.history.pushState(..... then the user can navigate back to previous sections via the back button.
Brother, " *window.onscroll* " property is not working. I had to use " *window.addEventListener("scroll" , )* " instead to make it work.. But I still couldn't figure out why * .onscroll* didn't work, can you please tell why it didn't work, has it gone deprecated or something, or any other issue..??
I wanted to express my sincere gratitude for the invaluable knowledge and insights I've gained from you. Your guidance has been instrumental in my growth, and I deeply appreciate the opportunity to learn from your expertise.🥳
Yo, I could see it working but the .active part is not really working ( I am using react), any solutions? I tried looking up and I feel the possible reason is the `.classList` being used. can anyone help me out??
I usually do it using the uselocation hook lol, but it's just a cheap workaround, if your website is veryyyy small orrr you can maybe use isActive (I remember it was used by me in my beginner coding days) there's some library for that in react Ps: I assumed you've used react here
This is great video works absolutely fine. But there is one more issue. When I click on the nav link, the page scrolls to top of the page, and my page is hiding under the navbar. So content of the page hides by header. How can we add the header offset so clicking on the nav link scrolls to just after the header? Can anyone have this problem and can suggest what we can do for this?
I finally found what I was looking for.... Thanks dude
Your channel is a piece of cake! Thank you for too many things you're sharing with us, I'm learning a lot! My best regards from Brazil. 🇧🇷
Glad to help 💚
Que legal encontrar outros brasileiros que gostam desse canal.
Great article, thanks. If you want to have the URL hashtag update as you cycle through, add something like " linkid='X' " to each a href, then add an onclick event to each link, where the parent.location.hash changes to the whatever the linkid attribute is . If you want to then add that in to the url's page history, use window.history.pushState(..... then the user can navigate back to previous sections via the back button.
perfectly working. This is an amazing video.😘
Thank you for the great video! Have been looking for a right and smooth solution for a couple of days.
it's a very helpfull for me....Thanks 👍
Many many thanks brother❤❤❤❤❤❤
Amazing work. Simple yet impactful and full of knowledge. Thank you so much I need to leave a comment expressing my gratitude.
Thank you! That's absolutely fine
Amazing work❤❤❤
Thank you 💚
It helped a lot. Thank you so much 😊
Mine doesn't work at all with the scroll-behavior: smooth function, does anyone know why?
@Codehal the onscroll and scrollY doesnt work...
You're very good at explaining
Brother, " *window.onscroll* " property is not working. I had to use " *window.addEventListener("scroll" , )* " instead to make it work..
But I still couldn't figure out why * .onscroll* didn't work, can you please tell why it didn't work, has it gone deprecated or something, or any other issue..??
Yoe have to use window.scrollY ...
Do i need to use section or can i use div to
0:16 how to make this effect when double click on the text
by pseudo element ===>
::selection{
}
Cool, but what if all sections are not 100vh? If all sections are 100vh it's easy, but what do you do if they are not?
thanks appreciate the help.
Lots of love bro
Thanks awfully!
There is a wrong in classList.add('active') do anyone know the reason,please?
If I put "top >= offset - 98 (height of header), then only it is perfectly working with complete scroll to the section...Any suggestion?
I wanted to express my sincere gratitude for the invaluable knowledge and insights I've gained from you. Your guidance has been instrumental in my growth, and I deeply appreciate the opportunity to learn from your expertise.🥳
Muchas gracias, por compartir... comprendido
Obrigado , me ajudou bastante .
Muito boa a explicação 😊✌️ Deus abençoe!
😇cool thank you soooo much
Yo, I could see it working but the .active part is not really working ( I am using react), any solutions? I tried looking up and I feel the possible reason is the `.classList` being used. can anyone help me out??
Lovely song in starting
🔥🔥🔥🔥🔥🔥🔥
This was single page website but if we have multi page website how make active link in that case ???
Pretty sure you can do:
a:is(:link, :active, :visited).active { color: white; background-color: black;}
Just apply the .html of that multi page in anchor tag
I usually do it using the uselocation hook lol, but it's just a cheap workaround, if your website is veryyyy small orrr you can maybe use isActive (I remember it was used by me in my beginner coding days) there's some library for that in react
Ps: I assumed you've used react here
The logic starts @ 6:30
This is great video works absolutely fine. But there is one more issue. When I click on the nav link, the page scrolls to top of the page, and my page is hiding under the navbar. So content of the page hides by header. How can we add the header offset so clicking on the nav link scrolls to just after the header? Can anyone have this problem and can suggest what we can do for this?
How can you do the same but using react?
This is what I find thanks
This amazing
Thank you
can I use this in my website?
just do on the css do this for easy code
*{
scroll-behavior: smooth;
}
its done it works just like in the video
Can we do this using php instead of js?
Responsivo, responsive?
How to put a text inside it broo if i put text its not inside
I didnt apply java script and its stilll working hmm
it works for the first 5 section, but it doesnt work on the last lmao
@aman12988
@aman12988
1 month ago
Brother, " window.onscroll " property is not working
bro use window.scrollY property ... it works
window.scrollY doesn't work either