How to Create a Back To Top Button Using CSS Only

Introduction

Scrolling long pages can be tiring. A "Back To Top" button helps users quickly return to the top. In this tutorial, we’ll create a simple Back To Top button using only HTML and CSS, no JavaScript needed!

HTML Structure

Here’s the basic HTML structure for our page and Back To Top button:

<body id="top">
  <div class="content">
    <div class="content-box">Section 1</div>
    <div class="content-box">Section 2</div>
    ...
  </div>

  <a href="#top" class="back-to-top">↑</a>
</body>

Explanation:

id="top" → Target for the Back To Top link.
.content-box → Simulates sections to scroll.
Back To Top button → Fixed circle at bottom-right that links to the top.

CSS Styling

We use CSS to style the content, sections, and Back To Top button:

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: #0d6efd;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.back-to-top:hover {
  background: #084298;
  transform: translateY(-4px);
}

html {
  scroll-behavior: smooth;
}

Key Points:

position: fixed keeps button visible while scrolling.
scroll-behavior: smooth ensures smooth scrolling to top.
border-radius: 50% makes the button circular.
hover effect changes color and moves button slightly up.

Demo Sections

Below are demo sections to test scrolling:

Section 1

Section 2

Section 3

Section 4

Section 5

Section 6