Internet Speed Test AI Prompt Library CSS Gradient Generator Meta Tag Generator Color Converter QR Code Generator

Scroll-to-Top Button Generator

Generate customizable HTML, CSS, and JS for a scroll-to-top button.

Customize Button

Background Color

Icon Color

Size (px): 48

Show After (px): 300

Live Preview

1. HTML

<button id="scrollToTopBtn" title="Go to top">↑</button>

2. CSS

#scrollToTopBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #007bff;
  color: #ffffff;
  cursor: pointer;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 48px;
  text-align: center;
  transition: opacity 0.3s, visibility 0.3s;
}

#scrollToTopBtn:hover {
  opacity: 0.8;
}

3. JavaScript

window.addEventListener('DOMContentLoaded', (event) => {
    const scrollToTopBtn = document.getElementById("scrollToTopBtn");

    window.onscroll = function() {
        if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
            scrollToTopBtn.style.display = "block";
        } else {
            scrollToTopBtn.style.display = "none";
        }
    };

    scrollToTopBtn.addEventListener('click', function(){
        window.scrollTo({top: 0, behavior: 'smooth'});
    });
});

Frequently Asked Questions

Related Web Tools

Modal & Dialog Snippet Generator

Creates responsive modals or popups with code snippets.

Tooltip & Popover Generator

Generates lightweight JS/CSS for tooltips.

Drag-and-Drop List Builder

Create sortable lists with a ready-to-use code snippet.

Mini Sparkline Chart Generator

Generate tiny inline SVG charts for dashboards.

Interactive Data Table Generator

Generate an HTML table with sorting, filtering, and pagination.

Countdown & Timer Widget Generator

Create countdown timers with custom labels and target dates to engage visitors instantly.

More Web Tools

Chronological Age Calculator

Calculate precise age (Years, Months, Days) for standardized testing and assessment reports.

Whack-A-Mole

Play a classic game of Whack-A-Mole.

Flip a Coin

A simple, interactive tool to flip a virtual coin.

Decision Roulette

A fun, interactive wheel spinner to help you make random choices.

Viewport Scroll Spy Generator

Track scroll positions and highlight active sections on your web pages easily.

Emoji Picker Widget Generator

Add a customizable emoji picker to your web forms or chat applications instantly.

Form Field Auto-Filler Generator

Automatically prefill your web forms using URL params or localStorage for testing and marketing.

CSS Shape & Clip-Path Generator

Create custom CSS shapes and clip-paths visually for modern web designs.

Dynamic Theme Generator

Create and preview dynamic CSS themes with variables for light, dark, or custom color schemes.