Scroll To Top Button Using only HTML and CSS
In this article, we Create Scroll To Top Button Using Css. We Create A button that scrolls to the top of the page When we Bottom Of the Page. We Create 3 to 4 Paragraph Of 100 Word Using Html and Then Create Scroll To Top Button Using CSS.
It’s needed when you long content on the page and you don’t want that your user closes your tab because who scrolls a lot, so this is a button that takes your user to the top of your page or any section where you want.
So in this project, we use only html and css to scroll to top. No framework or javascript only html css with basis code. So let’s start writing our html code for this scroll to top project.
HTML Code For Scroll To Top
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll To Top Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<!-- your content goes here -->
<h1>Main Title</h1>
<p>
Bear claw gummi bears danish ice cream halvah cotton candy pastry chocolate bar. Croissant cotton candy
cotton candy jelly beans shortbread cheesecake sugar plum. Marshmallow brownie liquorice jelly carrot cake
bonbon jelly-o ice cream. Sweet roll cupcake tootsie roll candy sugar plum gingerbread pastry. Halvah carrot
cake lemon drops cake marshmallow gingerbread pie sesame snaps. Cheesecake lemon drops muffin sweet wafer
chupa chups. Pudding gummi bears cupcake powder chocolate bar cupcake. Sesame snaps macaroon candy jelly ice
cream sweet muffin wafer carrot cake.
</p>
<h2>Secondary title</h2>
<p>Croissant tiramisu candy canes danish dragée lemon drops. Tart dessert dragée fruitcake bear claw danish
gingerbread. Croissant gingerbread chocolate cake apple pie sweet roll cotton candy. Jelly jelly icing
toffee cotton candy. Soufflé tart sweet roll chocolate sesame snaps fruitcake carrot cake. Wafer biscuit
cotton candy sweet icing. Sesame snaps sesame snaps gummi bears topping macaroon liquorice. Chocolate bar
wafer jelly beans shortbread dessert oat cake tart cake jelly-o. Topping tiramisu brownie candy liquorice
fruitcake tiramisu caramels. Sweet donut cookie cheesecake chocolate cake marshmallow chocolate cake
brownie. Gummi bears sugar plum sugar plum chocolate bar dragée pie gummies. Sweet candy canes icing
macaroon cookie pie jujubes sugar plum. Cake fruitcake pastry muffin sweet roll bear claw. Topping pudding
bonbon pudding cookie marshmallow.
</p>
<h2>Secondary title</h2>
<p>Croissant tiramisu candy canes danish dragée lemon drops. Tart dessert dragée fruitcake bear claw danish
gingerbread. Croissant gingerbread chocolate cake apple pie sweet roll cotton candy. Jelly jelly icing
toffee cotton candy. Soufflé tart sweet roll chocolate sesame snaps fruitcake carrot cake. Wafer biscuit
cotton candy sweet icing. Sesame snaps sesame snaps gummi bears topping macaroon liquorice. Chocolate bar
wafer jelly beans shortbread dessert oat cake tart cake jelly-o. Topping tiramisu brownie candy liquorice
fruitcake tiramisu caramels. Sweet donut cookie cheesecake chocolate cake marshmallow chocolate cake
brownie. Gummi bears sugar plum sugar plum chocolate bar dragée pie gummies. Sweet candy canes icing
macaroon cookie pie jujubes sugar plum. Cake fruitcake pastry muffin sweet roll bear claw. Topping pudding
bonbon pudding cookie marshmallow.
</p>
</div>
<a href="#" class="top">Back to Top</a>
</body>
</html>So this is our Html code, this is very long but we create only some Paragraph text sections so we have to get scroll bar Content and at the end of html code we add a ahref link that we use as a button in this project to scroll to top using the link.
50+ Html ,Css & Javascript Projects With Source Code
Only Html Code Output
Here is the output with only html code, then we write css for styling the link to the button and Give Functionality of scroll to the top.
CSS Code For Scroll To Top
body {
display: grid;
grid-template-columns: 1fr 0px;
font-family: system-ui, sans-serif;
background: #eee;
}
.top {
--offset: 100px; /* control when the button appear */
position: sticky;
bottom: 20px;
margin-right: 10px;
place-self: end;
margin-top: calc(100vh + var(--offset));
width: 60px;
aspect-ratio: 1;
background: #ff8b24;
border-radius: 10px;
font-size: 0;
}
.top:before {
content: "";
position: absolute;
inset: 30%;
transform: translateY(20%) rotate(-45deg);
border-top: 5px solid #fff;
border-right: 5px solid #fff;
}
h1 {
font-size: 3rem;
}
p {
font-size: 1.5rem;
text-align:justify;
}
body > div {
margin-inline: max(3px,50% - 800px/2);
}
/* remove the below if you don't want smooth scrolling */
html,
body {
scroll-behavior: smooth;
}This is our short css code for Scroll to Top button and now it’s working perfectly. We use a grid system to align our html content and style a Link to the button. Now Our Button Ready To Scroll to Top Of Page.
5+ HTML CSS Projects With Source Code
Final Output For Scroll To Top Button
This is the video for this project preview. You can see when we on home page (main page) scroll to top button not visible but when we little bit scroll there’s a button and when we click on this button we automatically scroll to the top of the page. We use only the id selector for this project you can see in html how we connect this link to our 1st section.
Hope you like this project, we create your own and use this project in any project. If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.
Ecommerce Website Using Html Css And Javascript Source Code
if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉
Code By – @t_afif
written by – Codewithrandom
