Very Simple HTML Scroll To Top Button – Free Download

Welcome to a quick tutorial on how to create a simple HTML scroll to top button. There are a ton of scroll-to-top plugins all over the Internet, but know what? Forget those overly complicated ones. We don’t need to load an entire library just to have to “back to top” button.

To create an easy HTML scroll to top button without Javascript:

  1. Add an id to the body tag itself – <body id="top">.
  2. At the bottom of the page, add a link back to the top – <a href="top">Top</a>

Yes, that’s all. But let us walk through a better example in this guide – Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Back To Top Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

BACK TO TOP

All right, let us now get into the example of how to create a “back to top” button – With pure HTML CSS Javascript.

 

1) THE HTML

scroll-top.html
<!-- (A) PUT "BACK TO TOP" BUTTON AT BOTTOM -->
<img src="up-button.png" id="backtop" onclick="totop()"/>

Just an image button. Yep, that’s all.

 

2) FIXED BUTTON AT CORNER

scroll-top.html
<!-- (B) CSS -->
<style>
#backtop {
  /* (B1) BOTTOM RIGHT CORNER */
  position: fixed;
  bottom: 20px; right: 20px;
  z-index: 999;

  /* (B2) HIDDEN BY DEFAULT */
  visibility: none;
  opacity: 0;

  /* (B3) COSMETICS */
  cursor: pointer;
  transition: opacity 0.3s;
}

/* (B4) SHOW BUTTON */
#backtop.show {
  visibility: visible;
  opacity: 1;
}
</style>

Next, we add some CSS to the button:

  • B1 – position: fixed; bottom: X; right: X; will fix the button at the lower right corner, regardless of the scrolling.
  • B2 – visibility: none; opacity: 0; Hide the button by default.
  • B3 – Well, just a bit of cosmetics.
  • B4 –  .show { visibility: visible; opacity: 1; } The idea is to attach this CSS class to the button when the user has scrolled down sufficiently, this will show the button; When the user is back at the top, we remove this CSS class to hide the button.

 

 

3) JAVASCRIPT

scroll-top.html
<!-- (C) JAVASCRIPT -->
<script>
// (C1) SMOOTH SCROLL TO TOP
function totop () {
  window.scroll({
    top: 0, left: 0, behavior: 'smooth'
  });
}

// (C2) SHOW/HIDE BUTTON
function togtop () {
  if (window.scrollY >= 100) {
    document.getElementById("backtop").classList.add("show");
  } else {
    document.getElementById("backtop").classList.remove("show");
  }
}
window.addEventListener("scroll", togtop);
window.addEventListener("resize", togtop);
</script>

Lastly, the Javascript should be pretty straightforward.

  • C1 – Fired when we click on the “back to top” button, smooth scroll to the top of the page.
  • C2 – Sadly, CSS cannot detect scrolling at the time of writing. So we will use window.scrollY to detect the scrolling, add/remove the show CSS class accordingly.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

Back To Top Button (Click To Enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

1 thought on “Very Simple HTML Scroll To Top Button – Free Download”

Leave a Comment

Your email address will not be published.