Create a "Scroll To Top" Button with HTML, CSS & JavaScript | Web Design Tutorial For Beginners
Вставка
- Опубліковано 4 жов 2024
- In this video we're going to create a "Scroll To Top" button using plain HTML, CSS and JavaScript - this is super easy to do and it is completely optional to use a library to achieve this.
While not necessary, I'm using Google Material Icons in this video along with jQuery for greater cross-browser support.
Google Material Icon Set:
material.io/to...
google.github....
Support me on Patreon:
/ dcode - with enough funding I plan to develop a website of some sort with a new developer experience!
For your reference, check this out:
developer.mozi...
Follow me on Twitter @dcode!
If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
#css #javascript #dcode
What a brilliant video, I'm a real novice to JS and you explained this so easily. Thank you for your video, I was able to add a nice scroll button to my website with a gradient background color for a bit of a 3d effect. Thanks again, I'm a new subscriber!
That's awesome mate! And welcome 😁
Thanks! I'm from Brazil and you saved my life!
Your keyboard has the most satisfying sound to me
wow, i didnt know that u can make such effect so easily!
thank you for your tutorial, it was very easy to follow and added this icon the website.
Lovely. Very helpful. Thanks for the tutorial, man.
No problem!
La verdad es que dispones de un muy buen contenido me estoy viciando viendo tus vídeos y aprendiendo y expandiendo mis conocimientos sigue así tienes talento para esto Gracias y un saludo
very simply explained
Hey Bro, really nice video. You are dynamic and have a such good approach.
Thank you so much 🙂
will try it
thank's bro I learnt something new in video....
Nice man ,thanks for sharing keep it up bro.
i watched million youtube videos even went to stackoverflow... and all they had to do was show me this
Thank you dear master
This helped me out a whole lot definitely and very very easily followed. Awesome work.
Thx for your traching!!!
is it possible to have it not visible the whole time until you scroll down a little?
ua-cam.com/video/gphMli74Chk/v-deo.html
Thank you soooo much this was perfect!
The button is there even when we are already on the top of the page, Can you tell how to make the button appear only after we scroll down a bit and when we are already on the top of the page to make it disappear?, Also loved the video!
ua-cam.com/video/gphMli74Chk/v-deo.html
thank you so much!
Thank you, this was helpful
Awesome thank you so much bro!
All good mate!
thank u so much .. you're a star .. a bright one .. :)
thank you my friend very much ❤❤❤❤
Thank you very much!
Extremely usefull!
your awesome dude, thanks!!
No wonder I subscribed to you. Thanks for the video, bro:)😁
Okay but desn't need JS for what it does. An anchor tag with _href="#"_ would do it.
What if you wanted to make the button disappear at the top screenfull ? Need JS then and event listener for scroll position.
I ve got only one question: how would you embed this functionality to every single page of your website?
You definitely wouldnt want to copy-paste this code on every page separately.
Thanks
By the way,great tutorial,as usual !
Im a big fan
Thanks mate! You can simply include the HTML on every page but keep it in a single file using your server-side language. For example, you can use PHP require_once() to do so.
Cool!
Thanks,pal
I know the video is 4 years old, but how can I have the button not cross over the footer once the user is at the bottom of the page? Cheers
You can use the first method and also get the animation, that method is compatible with Internet Explorer and is easiest to implement. You just need to add this 🔽 to your main CSS document on the top. And don't forget to add the javascript code that
DCODE used for the first methode. It works like a charm!
html{
scroll-behavior: smooth;
}
*add this to main.css or style.css
This is amazing, thank you!
I noticed that your keyboard is mechanical, and as a keyboard fan I was just curious of which keyboard you use?
Cooler Master MasterKeys Pro S RGB MX Blue
perfect thank you a lot
great job, thank you
Thanks alot
Is there any way to make it so when your at the top you can't see it but when you scroll a bit it appears?
ua-cam.com/video/gphMli74Chk/v-deo.html
thank you!
You're very welcome
ty so much!
No worries!
Great Content
Thanks mate :)
Me previously: this is going to be so hard... Let's watch this UA-cam video.
Me after the video: HOW I THIS SO EASY NOW???
Awesome!!
thanks bro
Is it possible to only show the icon when user has scrolled down, that is, the page is more than 0px from the top of the page?
ua-cam.com/video/gphMli74Chk/v-deo.html
Hi I'm just starting with html and css so if my question is weird. But what is difference between this icon function done by JS and #anchor link? Thank you for answer :)
Nice
useful
awesome!!!
you dont tell us how to hide this button if someone already at top, I mean just want to show this button only when your scroll you page down.
ua-cam.com/video/gphMli74Chk/v-deo.html
Alguna forma para que corrra diferente...osea la capacidad de corrrer menos es que me corre muy rapido.
Thanks!!
No worries!
good tutorial. but I can be the only one who had their retinas burned off when he went on the browser right?
Thanks ! Great. What is the font used in your Visual Studio code settings please ?
The font is Roboto Mono!
amazing:D
hey man.. thanks for this tutorial. you are doing a great job. i just subscribed to your channel. can you do a video on on scroll animations? like @keyframes acting up when the window is scrolled.. thanks
Hey thanks for subscribing! Do you mind going in further detail?
@@dcode-software hey man. i was wondering if you could do a video on animations when scrolled. like say the grid area is like "header 100vh and then main 150vh"0. when the document is scrolle and reaches the main section the contents of the main section fades in.. or something similar. Sorry i am not that articulate :p
Do I have to include JS in the head with a as I do with .css? (p.s.: it's the first time I use JS)
No, you need to include it using a "script" tag just before the end of the "body".
@@dcode-software yes I know, but it does not work, it's just in Grey color
If ur code is in a sperate file u can define
hey what is that addon you have for the different viewports?
It's part of Chrome Developer tools :)
how to scroll down to the bottom
it doesnt work for me...
nvm the first option worked, the second one didnt
Nice video but do you know if i can use my own scroll top button done on AI and not the one from google ?
Yeah sure, if you're talking about the icon then yes
@@dcode-software Thanks for you answer ! Sorry to take your time but i'm kind of like a beginer in HTML CSS stuff so
basically if i want to replace the icon by my png icon do i have to write something like this in the HTML :
...
?
Similar to that but do this instead:
Also make sure that you set the image width to 100% to ensure it does not expand over the width of the button.
@@dcode-software
it worked but it seems that the function html button create a background to my png as if it was a jpg. And when I click on my pgn the color change affects this background and not the shape of the png icon.
Maybe this background is the width of the button ? it only appear when i mouse click on the button or when
he passes over images (PS: i put css : background: none; )
Coding is hard xd
for me it's under the content
This is one of the most confusing videos I've ever seen. Makes it far more complicated than it has to be...completely explained backwards.