Hey guys! Welcome back to another awesome post! In this post we will see that how we can create a Scroll to top Button using HTML, CSS and JavaScript. So let's began! Before that please like this video and Subscribe to My Channel!
This is the video here!
Process:-
Open Visual Studio Code or Brackets. Then Create three files, Index.html, style.css, main.js. Then copy that Html Code from below and paste in Index.html, then same with the CSS and JS. Then save all the files, then just Run it!
CDN:-
This is the Font Awesome CDN to use the Up Icon:-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">{codeBox}
You can visit this website to chose Any icon you want.
https://fontawesome.com/v4.7/icons/ {codeBox}
Here is the Code:-
HTML:-
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Scroll-To-Top</title><link rel="stylesheet" href="style.css"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></head><body><h1>Scroll to Top!</h1><br><div class="line"></div><br><br><p>What we mean by copy and paste paragraphs is we are just trying to describe to you how easy we have made it to get messages and texts from here and send them to your bae, all you need to do is to scroll through the page and select the best one that truly describes and match your mood.Here we have different collections of long paragraphs for her copy and paste crush, ranging from 2021 long paragraph for her, crush paragraphs copy and paste, we have different kinds of paragraphs you can send to her when she is sad, bored, when on a long-distance relationship, also if you need paragraphs for girlfriend with emojis, then you are at the right place.</p><p>I don’t know what I did to deserve someone as wonderful as you, but I am eternally grateful to have your love, support, and affection. Thank you for being you, and for having me by your side. – Long Paragraphs for Her Copy and PasteYou are my happiness, my heart’s desire, my everlasting flame, the one that makes my heart beat fast. My love, my queen, I cannot think for a second without you in my mind. I cherish you, princess of beauty.I keep loving you every single day because you are the one for me. My love keeps growing stronger every second and I can’t explain how happy I am. Will you please</p><p>For the first time in my life, I don’t have words to describe how I am feeling. Now I know what it means to have a crush on a girl who is really dazzling. I like you. – long paragraphs for crush copy and pasteYou are my happiness the only treasure I adore with a complete passion. Since the day you came into my world; my life has never remained the same. You brought an endless smile to my face, amazing joy to my heart, baby I love you!Is it already dark there? It is already dark here. There are a large number of stars in the sky. The sky always amazes me. It seems to be limitless without any boundaries. You have a strange resemblance to this sky. You amaze me just like this beautiful sky and my feelings for you have no boundaries. I am simply unable to put limits or boundaries to my love for you. It keeps on increasing.</p><p>Python is an interpreted, object-oriented, high-level programming language with dynamic semantics. Its high-level built in data structures, combined with dynamic typing and dynamic binding, make it very attractive for Rapid Application Development, as well as for use as a scripting or glue language to connect existing components together. Python's simple, easy to learn syntax emphasizes readability and therefore reduces the cost of program maintenance. Python supports modules and packages, which encourages program modularity and code reuse. The Python interpreter and the extensive standard library are available in source or binary form without charge for all major platforms, and can be freely distributed.</p><a class="up" href="#"><i class="fa fa-angle-double-up" aria-hidden="true"></i></a><script src="main.js"></script></body></html> {codeBox}
CSS:-
@import url('https://fonts.googleapis.com/css2?family=Gemunu+Libre:wght@500&display=swap');body {margin: 0;text-align: center;font-family: Gemunu Libre;background-image: linear-gradient(to right bottom, #000000, #1b1a1a, #2f2d2d, #434241, #595856);}html{scroll-behavior: smooth;}h1{color: #fff;font-size: 60px;}.line{width: 100px;height: 10px;background-color: #fff;margin-left: 630px;}p{text-align: center;font-size: 30px;color: #fff;}.up{position: fixed;width: 50px;height: 50px;color: #fff;font-size: 50px;background-image: linear-gradient(to right top, #259cfb, #128aef, #0379e2, #0267d5, #0c55c6);bottom: 40px;right: 50px;text-decoration: none;text-align: center;line-height: 50px;border-radius: 5px;box-shadow: 0 0 5px #000,0 0 10px #fff,0 0 15px #fff,0 0 20px #fff,0 0 25px #fff,0 0 30px #fff;transition: 0.2s;}.up:hover{position: fixed;transform: scale(1.2);color: #fff;transition: 0.2s;} {codeBox}
That's it friends! Hope you liked it! Then please click or tap on the like button on my video and hit the red Subscribe Button! See you in the next post! Bye Bye!! Take care!
You can test it here 👲:-
See the Pen Scroll to top by AbhinavMishraAbhicoder (@abhinavmishraabhicoder) on CodePen.
0 Comments