Scroll To Top Button Using Html Css Code

Table of Contents

Scroll To Top Button Using Html Css Code

In this article, we see how can a button that scrolls to the top of the page. Yes, we create a button. When any user clicks on the button it scrolls to the top.

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

<!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 text sections and at the end of html code we add a ahref link that we use as a button in this project.

Output

scroll to top html

Here is the output with only html code, then we write css for styling link to button and style page also.

Css Code

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 grid and style a button too. Here is css update preview.

Html Css Project Idea

Final Output

scroll to top css

scroll to top css

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

Quiz Project Using Javascript

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

Share on:

Leave a Comment