Back to top button
Nobody likes scrolling all the way back up manually. It's tedious! Here's how to create a button that stays hidden until your user needs it, then slides them smoothly back to the start.
1. The HTML Structure
We need a simple button element. You can place this anywhere in your <body>, but I usually put it near the footer.
I'm using a simple HTML entity (↑) for the arrow here to keep things lightweight, but feel free to use a text label or an icon font if you're already loading one.
We also added an aria-label attribute. This gives the button a readable name for screen readers, since the arrow character alone isn't descriptive enough for accessibility tools.
<!-- The button is hidden by default via CSS -->
<button id="back-to-top" title="Go to top" aria-label="Back to top">↑</button>2. The CSS
We position the button at the bottom right, which is the standard thumb-zone for most users.
To make it appear and disappear smoothly, we use opacity and transition. We also set pointer-events: none when it's hidden so users don't accidentally click it while it's invisible.
<style>
#back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #333;
color: #fff;
border: none;
font-size: 24px;
cursor: pointer;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
z-index: 1000;
/* Animation properties */
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}
#back-to-top:hover {
background-color: #555;
transform: translateY(-3px);
}
/* This class will be added by JS to show the button */
#back-to-top.visible {
opacity: 1;
pointer-events: auto;
}
</style>3. The JavaScript
We don't want the button sitting there when the user is already at the top. We only want to show it after they've scrolled down a bit.
Place this at the end of your site, ideally right before the </body> tag.
We'll listen for the scroll event, check the window.scrollY position, and toggle the .visible class. Then, when clicked, we use the browser's native smooth scrolling behavior to scroll back to top!
<script>
// Select the button element
const backToTopButton = document.getElementById('back-to-top');
// Toggle button visibility based on scroll position
window.addEventListener('scroll', () => {
if (window.scrollY > 200) {
backToTopButton.classList.add('visible');
} else {
backToTopButton.classList.remove('visible');
}
});
// Scroll the window to the top smoothly when clicked
backToTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
</script>The value 200 in the script represents pixels. You can change this number if you want the button to appear sooner or later as the user scrolls.
4. The full code
Here is the complete snippet in case you're wondering what the code looks like when it's all put together!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Back to Top Demo</title>
<style>
body {
font-family: sans-serif;
line-height: 1.6;
background-color: #f0f0f0;
color: #333;
}
/* This class is only for this demo to force the page to scroll.
You don't need this for your actual website! */
.content {
max-width: 600px;
margin: 50px auto;
padding: 20px;
background: white;
min-height: 2000px; /* Forces scrolling */
border-radius: 8px;
}
#back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #333;
color: #fff;
border: none;
font-size: 20px;
cursor: pointer;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
z-index: 1000;
/* Animation properties */
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
}
#back-to-top:hover {
background-color: #555;
transform: translateY(-5px);
}
/* This class will be added by JS to show the button */
#back-to-top.visible {
opacity: 1;
pointer-events: auto;
}
</style>
</head>
<body>
<div class="content">
<h1>Scroll down!</h1>
<p>Keep scrolling...</p>
<p>(Lots of content here)</p>
</div>
<!-- The Button -->
<button id="back-to-top" title="Go to top" aria-label="Back to top">↑</button>
<script>
// Select the button element
const backToTopButton = document.getElementById('back-to-top');
// Toggle button visibility based on scroll position
window.addEventListener('scroll', () => {
if (window.scrollY > 200) {
backToTopButton.classList.add('visible');
} else {
backToTopButton.classList.remove('visible');
}
});
// Scroll the window to the top smoothly when clicked
backToTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
</script>
</body>
</html>Aaaand you're done! Your users will thank you for saving their tired fingers. <3