DEV Community

Cover image for How to Create a Scroll-to-Top Button with HTML, CSS, and JavaScript? Project 4
WEBDEVTALES
WEBDEVTALES

Posted on • Originally published at webdevtales.com

How to Create a Scroll-to-Top Button with HTML, CSS, and JavaScript? Project 4

In this tutorial, we explain to you the simple steps on how you can add a Scroll-to-Top button in your website. Such an input will help greatly in the user experience, just in case users want to scroll back to the top of your page because they scrolled down very far on a long page.

This feature is quite fun and adds a little bit of modernity to your website! Let’s create it with clean code snippets using HTML, CSS, and JavaScript.

Why Add a Scroll-to-Top Button?

Well, it is obvious; convenience and easier navigation. The button ensures that the readers won’t have to scroll back to the top of the page to read more after reading long content. This little addition can make a big difference in usability, especially for mobile users.

Here’s What We’ll Cover:

  • The HTML Structure
  • Styling the Button with CSS
  • Adding JavaScript to Trigger the Scroll
  • Making It Interactive and Smooth
  • Final Touches: Hover Effects and Animation
  • Responsive Design Considerations
  • SEO Benefits of Scroll-to-Top Buttons

Let’s jump right into the fun stuff!


Video Tutorial:

1. The HTML Structure

We’ll begin by adding the basic HTML structure. It’s very minimal—just a button that sits at the bottom-right corner of your page.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Scroll-to-Top Button</title>
</head>
<body>
  <h1>Scroll Down the Page</h1>
  <p>Scroll down to see the scroll-to-top button in action.</p>

  <!-- Scroll-to-top button -->
  <button id="scrollToTopBtn">&#8593;</button>

</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Key Takeaways:

  • The button is represented by an arrow (↑), symbolizing the upward scroll action.
  • The button is empty for now, but we will style it next.

2. Styling the Button with CSS

This is where we’ll give life to the button by styling it with CSS. We’ll make sure it’s eye-catching and positioned correctly.

/* General page styling */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  height: 2000px; /* Making the page long enough to scroll */
  background-color: #f0f0f0;
}

h1 {
  text-align: center;
  margin-top: 50px;
  color: #333;
}

p {
  max-width: 600px;
  margin: 20px auto;
  font-size: 18px;
  line-height: 1.6;
  color: #666;
}

/* Scroll-to-top button styling */
#scrollToTopBtn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #ff6b6b;
  color: white;
  border: none;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: none;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#scrollToTopBtn:hover {
  background-color: #ff4747;
  transform: translateY(-5px);
}

#scrollToTopBtn.show {
  display: flex;
}

Enter fullscreen mode Exit fullscreen mode

Key Takeaways:

  • The button has a fixed position at the bottom-right corner.
  • The button is round with a soft shadow for depth.
  • We used transition to add smooth hover effects.

3. Adding JavaScript to Trigger the Scroll

Now, we’ll add some JavaScript magic to make the button appear and scroll the page back to the top when clicked.

Continue Reading….

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay