How to Create a Back to Top Button in Javascript and CSS
Most of the time when you go through a website you have sent back to the top button at the right bottom or probably the left bottom corner of many websites when you scroll down the website and click on the button and it takes you to the top of the page. According to user behavior, this is an excellent feature on any website and today in this article, we will create this button only using CSS and Javascript.
Let's start, first of all, I will create the HTML part
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<h1>Section 01</h1>
</div>
</div>
<div class="container">
<div class="row">
<h1>Section 02</h1>
</div>
</div>
<div class="container">
<div class="row">
<h1>Section 03</h1>
</div>
</div>
<div class="container">
<div class="row">
<h1>Section 04</h1>
</div>
</div>
<div id="go_top" class="d-none">
<div class="arrow"></div>
</div>
</body>
</html>
Now we will write some CSS for fixed our button to the right bottom corner I will add some random sections in our page, and will apply gradient color in the body so that we will be able to check our web page when we click on the button the page is scrolling to the top or not, and I will also add smooth scroll feature in CSS as well as in javascript too.
.container {
height: 70vh;
}
body {
background: linear-gradient(#df1c7f, #6213d3);
scroll-behavior: smooth;
}
h1 {
color: #fff;
}
#go_top {
position: fixed;
right: 20px;
bottom: 40px;
cursor: pointer;
background: #f49100;
padding: 13px 10px 8px 10px;
/*box-shadow: 0px 0px 2px 0px rgba(0,0,0,.3);*/
clip-path: polygon(15% 0, 86% 0, 100% 14%, 100% 85%, 86% 100%, 14% 100%, 0 86%, 0 14%);
z-index: 9999;
}
#go_top img:hover {}
.arrow:before {
position: absolute;
left: 50%;
}
.arrow {
position: relative;
width: 20px;
height: 20px;
top: 50%;
margin: 0px 0 0 0px;
-webkit-transform: rotate(-135deg);
border-left: none;
border-top: none;
border-right: 2px #fff solid;
border-bottom: 2px #fff solid;
}
.arrow:before {
content: '';
width: 10px;
height: 10px;
top: 50%;
margin: -10px 0 0 -10px;
border-left: none;
border-top: none;
border-right: 2px #fff solid;
border-bottom: 2px #fff solid;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-name: arrow;
}
@keyframes arrow {
0% {
opacity: 0;
transform: translate(-5px, -5px);
}
100% {
opacity: 1;
transform: translate(5px, 5px);
}
}
/*go top arrow end*/
Now I will write our javascript function for the proper functioning of the go-to top button.
<script>
const showOnPx = 300;
const backToTopButton = document.querySelector("#go_top");
const goToTop = () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
backToTopButton.addEventListener("click", goToTop);
document.addEventListener("scroll", () => {
console.log("Scroll Height: ", scrollContainer().scrollHeight);
console.log("Client Height: ", scrollContainer().clientHeight);
if (scrollContainer().scrollTop > showOnPx) {
backToTopButton.classList.remove("d-none");
} else {
backToTopButton.classList.add("d-none");
}
});
const scrollContainer = () => {
return document.documentElement || document.body;
};
</script>