DEV Community

Cover image for Scroll to top button with just HTML CSS

Scroll to top button with just HTML CSS

🚩 Atul Prajapati 🇮🇳 on May 29, 2022

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 s...
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 🇮🇳

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
 
sirjoe profile image
Ibrahim Joseph

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 🇮🇳

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 🇮🇳

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 🇮🇳

Your man :)

shy

Collapse
 
esogargar profile image
Israa Gargar

This is really help me thanks ❤️😊🦾

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Enjoy

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 🇮🇳

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
 
alexandev_cwa profile image
Alexander Machic

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

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Your welcome Alex 😜☺️

I always like share my learnings and experiences 🚩

Collapse
 
ryanguitar profile image
Ryan Els

Very cool.
Thanks for sharing.

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Your welcome Ryan,

How you are going to use it?

Collapse
 
daniele_pais profile image
Daniele Pais

Excellent 👍👍👍

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

Thanks 🙏 Daniele

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 🇮🇳

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
 
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 🇮🇳 • Edited

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 🇮🇳

thank you :) amisha

Collapse
 
tilakjain123 profile image
Tilak Jain

Nice Post, very helpful!

Collapse
 
atulcodex profile image
🚩 Atul Prajapati 🇮🇳

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

thanks