Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a "scroll back to top" button with CSS?
On a lot of websites, you must have seen a Top button while you scroll to the bottom. That is called the “scroll back to top” button.
Create a Button
First, create a button that will be clicked to reach the top −
<button class="topBtn">Top</button>
Style the top Button
The display is set to none to make the button hidden. The button is positioned fixed using the fixed value of the position property. The bottom property is used to position the button downwardsn −
topBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 1;
font-size: 24px;
border: none;
outline: none;
background-color: rgb(90, 23, 129);
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
Scroll Down to Display the Button
On scrolling down, the button will be visible because the custom function scrollBtnShow gets called −
var topButton = document.querySelector(".topBtn");
topButton.addEventListener("click", topScroll);
window.onscroll = function() {
scrollBtnShow();
};
function scrollBtnShow() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
topButton.style.display = "block";
}
else {
topButton.style.display = "none";
}
}
Click the Button to Scroll Above
The button is visible when you scroll down. Click it and call another custom function to reach the top of the web page −
function topScroll() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
Example
The following is the code to create a “scroll back to top” button with CSS −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
height: 120vh;
}
div p {
font-size: 32px;
}
.topBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 1;
font-size: 24px;
border: none;
outline: none;
background-color: rgb(90, 23, 129);
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
.topBtn:hover {
background-color: rgb(75, 15, 145);
}
</style>
</head>
<body>
<button class="topBtn">Top</button>
<h1>Scroll to top button example</h1>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Beatae sit, voluptatem minima quibusdam facere hic eum excepturi ex eius, accusamus cum. Iusto quibusdam quo alias laboriosam, debitis natus vero. Accusantium iusto rerum quisquam enim porro! Animi reiciendis quidem esse veritatis quis excepturi mollitia alias, odio error at temporibus deleniti placeat dignissimos id? Suscipit autem incidunt ad sit soluta natus beatae eveniet eaque id. Atque vitae debitis neque assumenda
incidunt iste ut consequuntur cupiditate inventore, eveniet quo adipisci natus blanditiis illum facilis, eius harum cumque enim pariatur magnam sapiente perspiciatis numquam! Sapiente, molestias quaerat. Numquam laborum explicabo quam sapiente dicta aliquam.</p>
</div>
<script>
var topButton = document.querySelector(".topBtn");
topButton.addEventListener("click", topScroll);
window.onscroll = function() {
scrollBtnShow();
};
function scrollBtnShow() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
topButton.style.display = "block";
}
else {
topButton.style.display = "none";
}
}
function topScroll() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
Updated on: 17-Nov-2023
369 Views
Advertisements