How to make scroll to the top button using HTML

About Scroll To Top Button

Add Scroll To Top Button Using HTML, CSS, and JAVASCRIPT it is made by Coding Vlogs Youtube Channel. you can download the source code or copy the source code and use it for free. if you have not subscribed to our youtube channel so subscribe now we are creating a beautiful coding project and providing source code for free. To Download Source Code Scroll Down

Why Do We Need A Scroll To Top Button?

In This Blog, You Will Learn How to Make or Add Scroll To Top Button easily. And lots of websites use this technology for example- Coding Vlogs, Font Awesome, etc. The scroll To Top Button enhances the readability of the document and grabs the user's attention to a specific part of the webpage. Today we are going to learn how to create a Scroll To Top Button for a webpage using HTML, CSS, and Javascript. So, we have to create a Scroll To Top Button. or Adding a Scroll To Top Button menu to your website or webpage makes it look more customized and relevant to the Scroll To Top Button and offers you the freedom to add desired features to it. Still, it’s easy to overlook Scroll To Top Button and their impact on the user experience of our sites. Also known as a scroll-to-top button or go-to-top image, the sticky back-to-top button is a helpful navigation element that helps users get back to the top of the web page they’re viewing. A common UI pattern is to place this button in the lower right-hand corner of the screen, making it “sticky” via a fixed position so it’s always accessible as the user scrolls down the page.

For Beginner or Not?

This article is beginner-friendly, but to understand some concepts you should have basic knowledge of HTML, CSS And Javascript. Adding a Scroll To Top Button You Have To add a Button With the onClick Function of the window.scrollTo({top: 0}); and a small function for hide the button at the top.

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Coding Vlogs</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

<button class="back-to-top hidden" ><i class="fa-solid fa-chevron-up"></i></button>

<!-- Or use our CDN and nothing else. You can use your own CSS. For that read our docs. -->

<script src="https://cdn.codingvlogs.com/cdn/scroll_to_top.js"></script>
<link rel="stylesheet" href="https://cdn.codingvlogs.com/cdn/hidden_button.css"/>

</body>
</html>

CDN Docs

Welcome to the Coding Vlogs CDN. The CDNs is free and easy to use. Just select the same class and congratulations, your scroll to the top is ready! You can create custom designs using CSS, Use class="back-to-top" to change your normal button to a scroll to the top button and use hidden to hide your button on the page top class="back-to-top hidden"

Style (CSS)

.hidden{
  opacity:0%;
}

.back-to-top i{
  color: #fff;
  font-size: 1.15rem;
}

.back-to-top{
  z-index:99999;
  transition: opacity 0.5s; 
  position: fixed; 
  right: 20px; 
  bottom: 25px; 
  border: none; 
  cursor: pointer; 
  padding: 13px 15.8px; 
  border-radius: 30px; 
  background-color: #4285F4;
}

JavaScript

const showOnPx = 100;
const backToTopButton = document.querySelector(".back-to-top")

const scrollContainer = () => {
  return document.documentElement || document.body;
};

backToTopButton.addEventListener("click", () => {
    window.scrollTo({top: 0});
})

document.addEventListener("scroll", () => {
  if (scrollContainer().scrollTop > showOnPx) {
    backToTopButton.classList.remove("hidden")
  } else {
    backToTopButton.classList.add("hidden")
  }
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Coding Vlogs</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>

<button class="back-to-top hidden" ><i class="fa-solid fa-chevron-up"></i></button>

<!-- Or use our CDN and nothing else. You can use your own CSS. For that read our docs. -->

<script src="https://cdn.codingvlogs.com/cdn/scroll_to_top.js"></script>
<link rel="stylesheet" href="https://cdn.codingvlogs.com/cdn/hidden_button.css"/>

</body>
</html>

.hidden{
  opacity:0%;
}

.back-to-top i{
  color: #fff;
  font-size: 1.15rem;
}

.back-to-top{
  z-index:99999;
  transition: opacity 0.5s; 
  position: fixed; 
  right: 20px; 
  bottom: 25px; 
  border: none; 
  cursor: pointer; 
  padding: 13px 15.8px; 
  border-radius: 30px; 
  background-color: #4285F4;
}

const showOnPx = 100;
const backToTopButton = document.querySelector(".back-to-top")

const scrollContainer = () => {
  return document.documentElement || document.body;
};

backToTopButton.addEventListener("click", () => {
    window.scrollTo({top: 0});
})

document.addEventListener("scroll", () => {
  if (scrollContainer().scrollTop > showOnPx) {
    backToTopButton.classList.remove("hidden")
  } else {
    backToTopButton.classList.add("hidden")
  }
})

That's all now our Scroll To Top Button is ready. You can implement it on your site/blog. If you Like our Post so please click on this Like button and don't forget to Subscribe to Our Youtube Channel. Follow us on social media Link is given below. And Share This Blogs With your Friends and Family.

Back-To-Top.html Code 1.15KB .html All

Coding Vlogs

How to make scroll to the top button using HTML | CVFD