Scroll to top button with just HTML CSS

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

scroll to top button with JQUERY

Scroll to top button with JQuery

🚩 Atul Prajapati 🇮🇳 ・ May 30 '22

#html #css #beginners #tutorial

Comments

[Caleb Lewis]

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! 🙌🏾

[🚩 Atul Prajapati 🇮🇳]

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.

[Ibrahim Joseph]

same thing that came to mind; using the id on the page too.

[francoisaudic]

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

[🚩 Atul Prajapati 🇮🇳]

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

[enesstr]

why people afraid of JavaScript? Don't understand..

[Alvaro Montoro]

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?

[🚩 Atul Prajapati 🇮🇳]

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

[enesstr]

My man☺️

[🚩 Atul Prajapati 🇮🇳]

Your man :)

[Israa Gargar]

This is really help me thanks ❤️😊🦾

[🚩 Atul Prajapati 🇮🇳]

Enjoy

[Fago12]

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.

[🚩 Atul Prajapati 🇮🇳]

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!

[Alexander Machic]

Amazing post, thanks for share this post to learn more 😅👌

[🚩 Atul Prajapati 🇮🇳]

Your welcome Alex 😜☺️

I always like share my learnings and experiences 🚩

[Ryan Els]

Very cool.
Thanks for sharing.

[🚩 Atul Prajapati 🇮🇳]

Your welcome Ryan,

How you are going to use it?

[Daniele Pais]

Excellent 👍👍👍

[🚩 Atul Prajapati 🇮🇳]

Thanks 🙏 Daniele

[Ian Soper]

This doesn’t work for me on mobile (Safari, iOS 15.5). Is anyone else getting different results?

[🚩 Atul Prajapati 🇮🇳]

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

[Nana Quame Vybes]

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 ⁉️

[🚩 Atul Prajapati 🇮🇳]

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