Scroll top button - back to top Using Only HTML & CSS

[@abdulmohamin992]

you have helped me more than any of my professors

[@atulcodex7730]

yes because our education systems are totally outdated :(

[@ouza7mdi108]

@@atulcodex7730 lool

[@GeorgeAziz-k5y]

code : html :


css :
html {
scroll-behavior: smooth;
}
.up a {
background-color: var(--mainColor);
color: black;
position: fixed;
bottom: 10px;
right: 20px;
padding: 12px;
border-radius: 10px;
}
.up a:hover {
transform: translateY(-10%);
transition: 0.2s;
}

[@vincentleopascua8603]

WOW! I cannot see anything complex in the code and yet it works fine! Thank you so much for this simple tutorial!

[@aishahbaharudin7445]

Hi thanks for the tutorial, but how can i make the button shows only when it reached bottom?

[@geldiakmurat2569]

Can you make in eccommerce - and + buttons on products or bottom product if you can looking please? Thanks

[@pimonsolak3692]

Hi,
I would like to ask if you can do button which will take you to chosen place on the page? Thanks so much

[@DjR4D1C]

just type in the section you want to go to.. for instance if you have a p with id "paragraph" just put "#paragaph" in de href and it shoudl redirect you there

[@DEADSHOTPLAYZ]

Thanks alot it still works. By the way dark paradise is one of my favourite songs. Nice intro.

[@nivederikkil7268]

Sir, it's helped me lot but in project their is some more tabs but everypage scroll clicked it's going to home page.Sir can you provide the code for multiple tabs with scroll effect it will be a helpful for all !!!

[@jersoniemanguiat9306]

you are so great thanks.Iam now one of your subscriber

[@pushpapremp3899]

Video is super. May I know Which line makes it to scroll up?

[@DarkCodeOnline]

in the html if you write # in href attribute you scroll to top

[@pushpapremp3899]

Thanks for the reply. I got it

[@nikolaimochalov7863]

Why would you use px for font size rather then rem or em? Pixels are not responsive

[@KesCeleste]

My arrow doesn't pop up :(

[@rishavsharma765]

Hello there,
This is the very first video of yours that I watched.
Thank you so much for the quality of content you are providing.

[@reda4384]

Can you make a portofolio website tuto please !?

[@dundja33]

I don't get it... what line of CSS code is giving this effect ?? :/ #confused

[@DarkCodeOnline]

look in html style you will find scroll-behavior: smooth;

[@Soap_js]

I m confused too what line of code is making it go to top???

[@JEsterCW]

@@Soap_js i also dont get it haha

[@TechAllByHarshit]

@@Soap_js href="#"

[@vladtiutiunov3206]

JEsterCW , also you can find via the internet how to use anchors and scroll to any place of site

[@munnawmv]

Great.
Subscribed and love from Bangladesh. 💌💌💌

[@bassamaldoohan7245]

first of all the song is so motivational and exciting and then the content is pure clean and on point thx a million ^_^

[@mohamedalahwany8702]

how to make this button show only when you scroll down after specific height ? not always show as your video

[@yousaf_ali]

Please what's Editor name

[@filippoerbisti4261]

how can i add this into a file.html that already exsists?

[@reallygood7580]

You are that cool, so I think you made your intro with HTML and CSS

[@OMARALI-fs2nw]

Where so you live ?

[@DarkCodeOnline]

not live that was premiere

[@OMARALI-fs2nw]

I meant where do you live ,

[@DarkCodeOnline]

@@OMARALI-fs2nw xD i am from morocco Meknes

[@OMARALI-fs2nw]

@@DarkCodeOnline
أهلا و سهلا

[@lioncat731]

WOW CSS level.99 ! but I'm not sure my arrow is still showing the background of Fawesome even when I follow exactly your steps ? 1 square with my color and then inside another square with fawesome.... too bad can't show photo here..

[@anthonyhanson4995]

what's the font awesome website address? I've been pulling up a different font awesome.

[@FernandoGallegos666]

Y para hacer que las imagenes vayan hacia la derecha?

[@zoebouloudas2700]

was not expecting Lana del ray as an intro song for a html/css video ngl

[@chikondiphiri6940]

my arrow disappears when i add a fixed position

[@ayeshashahid6940]

You just solved my problem... You are great

[@sadhanrai3374]

how its goes up

[@alfiyashekh7373]

Very helpful and easiest code 😊

[@sihabportal8623]

Thank you brother
Love from Bangladesh

[@rafkakeserwani8750]

رخيؤخخسس

[@rafkakeserwani8750]

يعلسممءء

[@goblin44490]

Music it at other level

[@vaziraikhtiyorova]

THANK YOU! IT WORKED PERFECTLY!

[@jackshothis]

Can you make a very professional looking website?

[@danielwatson6529]

yes

[@des-cy9er]

How to do same but button for fast go down? Here is used simple # co how to do to down :/?

[@DarkCodeOnline]

Here you should use js

[@des-cy9er]

@@DarkCodeOnline Thanks for reply I will learn it soon :D

[@vukvukasinovic3816]

Amazing man, THANKS 💪🏼

[@vukvukasinovic3816]

You are my teacher 🤣
Greetings from Montenegro 🇲🇪

[@work9167]

Nice and easy as a professional

[@sanchitkhare7977]

Song name?

[@sanjanabandarajourney]

Thank you so much for this simple tutorial😃

[@johnyonardpauly5601]

4min waiting on that just one line of css code :D Anyway good tutorial, really an efficient way. Got it.

[@DarkCodeOnline]

xD ♥

[@amankureshi1]

Thank you very much sir ❤

[@andikarifqimaulana682]

Hey, i so helpfull with your tutorial videos. But, can you put that video at playlist, so i can teach it easily.

[@DarkCodeOnline]

ok

[@John-du4wf]

Hello can you teach me html and css

[@CrisperFN]

Ain't working for me :p

[@hungtranngoc3308]

thanks so muck. You save my life bro ♥

[@vidyasingh8117]

How?

[@JEsterCW]

I love you D: dont stop making those vids buddy! Helping me a lot

[@Tandith]

how is this working?

[@maq17]

How to make it sticky....??anyone

[@lalocanario243]

Me encantan los videos donde no hablan y solo hay linda musica,

[@abdullahalsaad2200]

wow thanks for help..

[@gavra-1337]

Thanks a lot! 😄

[@muhammadzafar2470]

thank you very helpful tutorial. appreciated

[@TechEduBangla]

Thank you.

[@OMARALI-fs2nw]

هل لديك صفحة على فيس أو انستغرام

[@im.shaayaaan3342]

Thanks for this video

[@jeust2731]

so helpful i love u

[@jennygrigoryan3809]

Doesnt work

[@amircahyadi9219]

So simple amazing.... Thank you2

[@marcelorodrigues4729]

Very good 👏👏

[@adewumisunkanmi5593]

God bless you bro

[@OMARALI-fs2nw]

شيء جميل و ممتع ألي تعمله

[@DarkCodeOnline]

شكرا لك اخي

[@shrirambalaji2915]

Thank you

[@OMARALI-fs2nw]

أنا عمر من سوريا

[@DarkCodeOnline]

Welcome Brother ♥♥

[@benthomson2406]

awesome work!

[@Komi098]

Lol.. No JavaScript??
Thanks... ;)

[@DarkCodeOnline]

yes

[@andreasofficiall]

I was expecting to learn how to scroll up, not just copy paste :(

[@manhtrangtn]

Cool, =)))) if href="#" auto scroll to top. thanks

[@caccon5023]

ủa thế à ông, để href="#" là auto đẩy lên à ?

[@zarkydotexe3666]

@@caccon5023 dung roi ong # cung se tu dong len top trang nhung co dieu la no chay thang va k co muot

[@caccon5023]

@@zarkydotexe3666 à ok cảm ơn ông nhiều nha

[@biocode9814]

Awesome 💝💝

[@tronghieu60s]

Thanks bro 😍

[@mohammedwissam7936]

thanks a lot

[@nuliferonar5335]

thank you darkcode

[@seahmadnail]

so creative

[@rkb0088]

thank you bro

[@NoName-vl5gr]

Cool!

[@nhutaohoang4191]

cái này là nhờ thẻ chứ thật ra chẳng cần làm cái gì hết :)

[@f44j4]

Thanks 😍

[@choketriratanapipat9328]

Thankyou Brother

[@heezq9874]

Thanks!

[@nallu2827]

Thanks

[@axelxcx6641]

Lana

[@OMARALI-fs2nw]

You are the bist

[@stanleysimeon4667]

Good job

[@williamssantos1498]

Plys make login panel acess mysql plys

[@DarkCodeOnline]

ua-cam.com/video/y_MitTGbnWE/v-deo.html

[@chanducharivelakanti288]

TQ bro

[@originalx136]

You've already doubled in subscribers I remember when you had 2k lol

[@DarkCodeOnline]

=) thank you brother for supporting xD

[@niyamariya3131]

good information

[@webdeveloper6790]

Nice video

[@srsajjad7460]

the preview should be side by side

[@aadrien5977]

vraiment ouf ton truc

[@lengg7276]

Thankyouuu

[@edgeofwonders2914]

Thumb down for music!

[@bobbytimmons12]

LANA

[@tomiwaoluwole1818]

nonsense

[@Giankpetrov]

thanks