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

Top comments (28)

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
 
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 ๐Ÿ‡ฎ๐Ÿ‡ณ

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

Collapse
 
amisha2002 profile image
Amisha Kulkarni

Cool :)

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

thank you :) amisha