Hello dear friends ๐
๐ค Hope you all doing good in your coding journey.
In this post i have to show a "scroll to top" button which you might have seen on professional and long website pages which help is to go back to top of the page.
Confused ๐คฏ
Explore this one
Top comments (28)
Ah so the
scroll-behavior: smoothcss on thehtmltag makes the bowser a bit smarter and prevents a refresh! I was just playing with it in codepen and it works with ids on the page too!Very clever and useful - thanks! ๐๐พ
yeah its a short invention :)
Actually i am working on a "Insurance" service based website and I want to add this scroll to top button on it, that's why all this efforts :)
by the way, thanks for sharing your feelings in comment. You are a nice guy.
same thing that came to mind; using the id on the page too.
Not accessible for keyboard and screen-reader users, because the focus is not going at the top of the page, with the scroll, and the link hasn't a label that can be rendered by screen-reader to indicate the purpose of the link.
You can take a look at my fork if you want to see some fixes of these issues : codepen.io/Kain314/pen/ExQLLJd
Oh wow thanks for this feature update, you are a nice. thank you very much.
but I'm still not able to access it without mouse :|
why people afraid of JavaScript? Don't understand..
It's not a matter of being afraid of JavaScript. It's using the languages within their domain of action. A redirection is part of the HTML (an anchor), and the scrolling animation is UI (so CSS). Why add JavaScript to do something that shouldn't be handled by JavaScript?
Exactly ๐โบ๏ธ๐คญ
Sometimes we have consider time also when working on a project ๐.
In my case I have used jQuery because it has its own ready functions ๐๐๐
My manโบ๏ธ
Your man :)
This is really help me thanks โค๏ธ๐๐ฆพ
Enjoy
Hey. I am new. There is also this scroll behaviour using JavaScript, where once you click on a link to another page on the same site, scrolling starts from last position of the previous page to the top. I don't know if anyone understands this. I just want to know what feature that is.
Hello fago, welcome to our community :)
I'm not able to understand your curiosity, can you please share some screenshot or something as a example. If possible!
Amazing post, thanks for share this post to learn more ๐ ๐
Your welcome Alex ๐โบ๏ธ
I always like share my learnings and experiences ๐ฉ
Very cool.
Thanks for sharing.
Your welcome Ryan,
How you are going to use it?
Excellent ๐๐๐
Thanks ๐ Daniele
This doesnโt work for me on mobile (Safari, iOS 15.5). Is anyone else getting different results?
It's working for me. try different browser.
my it's not compatible in Safari or make sure you have scroll down to bottom then click that green button.
peace :)
Simple yet awesome ๐. However, shouldn't the icon/buttonโฌ๏ธ appear when the reader scroll to a portion down before showing rather than it being sticky on the post โ๏ธ
Yes Nana, In this post my main goal is to make a simple "scroll to top" working button in next posts I will try to add that hide show feature also.
Thanks for your priceless time, I appreciate it :)