Nurhidayat

Menu

How to Create a Back to Top Button without Javascript

Taufik Nurhidayat
4 min read
#programming #tutorial

On a blog or website, there is usually a back-to-top button with an upward arrow icon. It's not difficult to create it; you just need to embed a hashtag link that leads to the topmost element of the page. Is Javascript necessary? No! Javascript is just a sweetener so that when the page is scrolled down, the button appears, and when the page is at the top, the button does not appear.

On a blog or website, there is usually a back-to-top button with an upward arrow icon. It’s not difficult to create it; you just need to embed a hashtag link that leads to the topmost element of the page. Is Javascript necessary? No! Javascript is just a sweetener so that when the page is scrolled down, the button appears, and when the page is at the top, the button does not appear.

Add Button to Page

Suppose you have HTML like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Creating a Back to Top Button</title>
  </head>
  <body>
    <header id="header"><h1>Creating a Back to Top Button</h1></header>
    <main style="height:1140px">Here we will learn how to create a back to top button without javascript!</main>
  </body>
</html>

We add the button right above the </body> tag as follows:

<div id="top"><a href="#header">TOP</a></div>

#header is the ID of the <header>. Since #header is the topmost ID, the button will direct the page to the top. The final display is like this:

<!DOCTYPE html>
<html>
<head>
<title>Creating a Back to Top Button</title>
</head>
<body>
<header id="header"><h1>Creating a Back to Top Button</h1></header>
<main style="height:1140px">Here we will learn how to create a back to top button without javascript!</main>
<div id="top"><a href="#header">TOP</a></div>
</body>
</html>

Add Style

The button works well, but it will appear at the bottom of the page. To make the button visible, we need to add CSS. Place the following CSS in the head section.

<style>
#top a {
padding: 1rem;
background-color: red;
color: black;
position: fixed;
right: 1rem;
bottom: 1rem;
}
</style>

This CSS makes the button float and occupy the bottom right corner, and changes the width and color of the button. The final result is like this:

<!DOCTYPE html>
<html>
<head>
<title>Creating a Back to Top Button</title>
<style>
#top a {
padding: 1rem;
background-color: red;
color: black;
position: fixed;
right: 1rem;
bottom: 1rem;
}
</style>
</head>
<body>
<header id="header"><h1>Creating a Back to Top Button</h1></header>
<main "height:1140px">Here we will learn how to create a back to top button without javascript!</main>
<div id="top"><a href="#header">TOP</a></div>
</body>
</html>

Add scroll-behavior

The button will work but will not scroll; it will go directly to the top. To make the page scroll smoothly, add the following CSS code:

html {
scroll-behavior: smooth;}

The final result is like this:

<!DOCTYPE html>
<html>
<head>
<title>Creating a Back to Top Button</title>
<style>
html {
scroll-behavior: smooth;}
#top a {
padding: 1rem;
color: #007bff;
position: fixed;
right: 1rem;
bottom: 1rem;
}
</style>
</head>
<body>
<header id="header"><h1>Creating a Back to Top Button</h1></header>
<main style="height:1140px">Here we will learn how to create a back to top button without javascript!</main>
<div id="top"><a href="#header">
  <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-arrow-up-square-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 8.354a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 6.207V11a.5.5 0 0 1-1 0V6.207L5.354 8.354z"/>
</svg>
</a></div>
</body>
</html>

When the button is clicked, the page will scroll up slowly.

Change Text and Color

To make the display better, we change the button with an icon from Bootstrap.

<div id="top"><a href="#header">
  <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-arrow-up-square-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 8.354a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 6.207V11a.5.5 0 0 1-1 0V6.207L5.354 8.354z"/>
</svg>
</a></div>

and change the color in CSS.

#top a {
padding: 1rem;
color: #007bff;
position: fixed;
right: 1rem;
bottom: 1rem;
}
#top a:hover {
color: #085eb9;
}

We remove the background because the icon already has a background and add hover so that when the button is hovered over, the color changes. The final result.

<!DOCTYPE html>
<html>
<head>
<title>Creating a Back to Top Button</title>
<style>
html {
scroll-behavior: smooth;}
#top a {
padding: 1rem;
color: #007bff;
position: fixed;
right: 1rem;
bottom: 1rem;
}
#top a:hover {
color: #085eb9;
}
</style>
</head>
<body>
<header id="header"><h1>Creating a Back to Top Button</h1></header>
<main style="height:1140px">Here we will learn how to create a back to top button without javascript!</main>
<div id="top"><a href="#header">
  <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-arrow-up-square-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 8.354a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 6.207V11a.5.5 0 0 1-1 0V6.207L5.354 8.354z"/>
</svg>
</a></div>
</body>
</html>