back to top button without JavaScript

How to create back to a top button without JavaScript?

This is a fantastic feature to have on any website, and we’ll show you how to create back to a top button using only HTML and CSS only.

It’s worth noting that you can use this on any website, whether it’s an existing one or one you’re just getting started on.

First of all, create an HTML page. Here is a sample.

<! -- back to top button with HTML and CSS -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
  <section style="padding:100px;">
    <h1>Back to top button with HTML and CSS only</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex, assumenda.</p>
  </section>
  <a class="gotopbtn" href="#"> <i class="fas fa-arrow-up"></i> </a>
</body>
</html>
<! -- back to top button code ends -->

Now add some CSS code here.

/* CSS code for back to top button */
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
}
section {
  width: 100%;
  height: 400vh;
}
.gotopbtn {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #dd0303ba;
  opacity: 0.7;
  bottom: 40px;
  right: 50px;
  border-radius: 5px;
  text-decoration: none;
  text-align: center;
  line-height: 40px;
  color: white;
  font-size: 18px;
}
.gotopbtn:hover {
  background: #ae2727;
  opacity: 0.8;
}
/*  */

That’s it. the button will now be available on your web pages.

Read More: How to center a DIV in CSS, Bootstrap, or Tailwind CSS?

AdBlocker Message

Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.