About: HTML, CSS, Bootstrap, XML, ajax, react js, WordPress, Magento, Shopify, Photoshop, Camtasia, SEO & learning new skills every moment 👨🏼💻 | I believe in learning and sharing with others 🛴
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.
Explore this one
Your welcome Alex 😜☺️
I always like share my learnings and experiences 🚩
Ah so the scroll-behavior: smooth css on the html tag 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.
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 :)
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 🏁🏁🏁
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 :|
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 :)
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 😅👌