Scroll to Top Button (HTML and CSS Only)

scroll to top button feature photo

We want to share how we made the 'scroll to top button' on our website. It is super simple and requires only HTML and CSS to do the job.

    about this button...

  • only HTML and CSS
  • fixed position on page
  • hover colour change
  • text shadow fallback
  • smooth page scrolling

Video Tutorial

open video on PeerTube

You can also watch this video on YouTube.


            <div id="scrolltop"></div>
            <a href="#scrolltop">
              <div class="scroll-arrow"></div>
              <div id="scroll-text">top</div>


        /*teardrop shape styling*/
        .scroll-arrow {
          position: fixed;
          left: 26px;
          bottom: 26px;
          width: 36px;
          height: 36px;
          background: rgba(0, 0, 0, 0.66);
          border-radius: 50% 0 50% 50%;
          transform: rotate(-45deg);
          z-index: 9;

        /*text styling*/
          color: white;
          position: fixed;
          left: 30px;
          bottom: 33px;
          font-size: 19px;
          z-index: 10;
          text-shadow: 2px 2px 10px purple;
          font-family: Arial, sans-serif;
          font-weight: bold;
        #scroll-text:hover {
          color: lightgreen;

        /*for smooth scrolling*/
        html {
          scroll-behavior: smooth;

The steps

  1. in the footer, create a div with the class="scroll-arrow"
    • style the class to the shape and colour you want (we recommend making it slightly transluscent)
    • set z-index to 9
    • use position: fixed to place it in a location you prefer
  2. in the footer, create another div with the class="scroll-text"
    • style the class with a contrasting colour, font-family of choice (this is important! as different fonts have different spacing, size etc. which will mess up the positioning), text-shadow (similar colour to the shape, for fallback)
    • set z-index to 10
    • use position: fixed to place it on top of the shape
    • give it a :hover color if you want
  3. in the header, add a div with id="scrolltop" as the anchor
  4. in the footer, wrap the two div in a <a href="#scrolltop">. Now the button should work!
  5. for a better viewing experience, style html with scroll-behavior: smooth


BTW, the teardrop shape was inspired by a CSS Battle challange! It is a fun game to improve your CSS skills by replicating images and shapes. Definitely go check it out!

Play with the code!

thank you for reading!