Improve Header & Navigation Access
Adding a back to top button to your website improves access to the header and navigation items on your web page. Visitors can quickly click a button to gracefully scroll back to the top of the page.
Seeing these buttons is kind of standard. There’s even one on this website. So, let’s figure out how to make a back to top button!
Back To Top Button Example Page
Please note this is just a bare-bones example page, but the concept is still the same. I just used a styled div with text in it for my back to top button. You could use an SVG or an image here as well. Or, even convert your image to SVG to use inline.
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Scottsweb.dev - Back To Top Button</title>
<style>
#back-to-top {
display: flex;
transform: rotate(-90deg);
border-radius: 50%;
border: solid 1px black;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
cursor: pointer;
position: fixed;
right: 2rem;
bottom: 2rem;
}
#back-to-top a {
text-decoration: none;
}
</style>
</head>
<body>
<!-- create long text -->
<p id="top">Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p>
<p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p><p>Long body</p>
<!-- back to top button -->
<div id="back-to-top">
<a href="#top">></a>
</div>
<!-- add an event listener for back to top button click when the dom is ready -->
<script>
document.addEventListener('DOMContentLoaded', function(e) {
e.preventDefault();
let back_to_top = document.getElementById('back-to-top');
back_to_top.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
})
})
</script>
</body>
</html>Take Care Of People Without Javascript
Most people have javascript enabled, but around 1% of people do not. If we can make life easier for those 1% of people, we should. We can accomplish this by giving the anchor link in the back to top button an a href of an element id. Here, I gave the first text element on the page an id of “#top” and anchor linked to that. That way, someone without javascript enabled would go to the top of the page when they click this button.
The Javascript Makes The Scrolling Work
The real snippet here is the javascript code. When the dom content is ready, we add an event listener to the back to top element. When the back to top button gets clicked, the window scrolls to the top. It’s important to note the “behavior: ‘smooth'” part. Without it, the page would just quickly scroll to the top.
See more front end development articles and more wordpress articles.