DEV Community

Cover image for Scroll to top button with just HTML CSS
Atul Prajapati
Atul Prajapati

Posted on • Updated on

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

Discussion (24)

Collapse
calebdre profile image
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! πŸ™ŒπŸΎ

Collapse
atulcodex profile image
Atul Prajapati Author

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.
thanks

Collapse
jagajastic profile image
Ibrahim Joseph M.

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

Collapse
francoisaudic profile image
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

Collapse
atulcodex profile image
Atul Prajapati Author

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

Collapse
enesislam profile image
enesstr

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

Collapse
alvaromontoro profile image
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?

Collapse
atulcodex profile image
Atul Prajapati Author

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

Thread Thread
enesislam profile image
enesstr

My man☺️

Thread Thread
atulcodex profile image
Atul Prajapati Author

Your man :)

shy

Collapse
fago12 profile image
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.

Collapse
atulcodex profile image
Atul Prajapati Author

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!

Collapse
ryanguitar profile image
Ryan Els

Very cool.
Thanks for sharing.

Collapse
atulcodex profile image
Atul Prajapati Author

Your welcome Ryan,

How you are going to use it?

Collapse
iansoper profile image
Ian Soper

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

Collapse
atulcodex profile image
Atul Prajapati Author

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

Collapse
alexandev_cwa profile image
Alexander Machic

Amazing post, thanks for share this post to learn more πŸ˜…πŸ‘Œ

Collapse
atulcodex profile image
Atul Prajapati Author

Your welcome Alex 😜☺️

I always like share my learnings and experiences 🚩

Collapse
iykex profile image
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 ⁉️

Collapse
atulcodex profile image
Atul Prajapati Author

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

radhe radhe

Collapse
amisha2002 profile image
Amisha Kulkarni

Cool :)

Collapse
atulcodex profile image
Atul Prajapati Author

thank you :) amisha

Collapse
tilakjain123 profile image
Tilak Jain

Nice Post, very helpful!

Collapse
atulcodex profile image
Atul Prajapati Author

:) Yes I like to help, thanks for your kind words. Tilak

thanks