Article Categories

Selected Reading

How to create a \"scroll back to top\" button with CSS?

CSS Web Development Front End Technology

A scroll back to top button is a common UI element that appears when users scroll down a page, allowing them to quickly return to the top. This improves user experience on long web pages.

Syntax

.scroll-to-top-button {
    position: fixed;
    bottom: value;
    right: value;
    display: none;
}

Method 1: Basic CSS-Only Approach

Create a simple scroll to top button using CSS positioning and basic styling −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: Arial, sans-serif;
        height: 200vh;
        margin: 0;
        padding: 20px;
    }
    
    .content {
        background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);
        padding: 50px;
        margin: 20px 0;
        border-radius: 8px;
    }
    
    .scroll-top-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 50px;
        height: 50px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 50%;
        font-size: 18px;
        cursor: pointer;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
        transition: all 0.3s ease;
    }
    
    .scroll-top-btn:hover {
        background-color: #0056b3;
        transform: scale(1.1);
    }
</style>
</head>
<body>
    <h1>Scroll Down to See the Button</h1>
    
    <div class="content">
        <h2>Section 1</h2>
        <p>This is some content. Keep scrolling down to see more content and the scroll to top button will appear.</p>
    </div>
    
    <div class="content">
        <h2>Section 2</h2>
        <p>More content here. The button should be visible now if you've scrolled down enough.</p>
    </div>
    
    <div class="content">
        <h2>Section 3</h2>
        <p>Even more content. Click the button to scroll back to the top smoothly.</p>
    </div>
    
    <button class="scroll-top-btn" onclick="scrollToTop()">?</button>
    
    <script>
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }
        
        window.onscroll = function() {
            const button = document.querySelector('.scroll-top-btn');
            if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
                button.style.display = 'block';
            } else {
                button.style.display = 'none';
            }
        };
    </script>
</body>
</html>

A page with multiple content sections appears. When you scroll down past 100px, a circular blue button with an upward arrow (?) appears in the bottom-right corner. Clicking it smoothly scrolls back to the top. The button has hover effects and disappears when near the top.

Method 2: Advanced Styling with Animation

Create a more sophisticated button with fade-in animation and better visual design −

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        height: 250vh;
        margin: 0;
        padding: 20px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    
    .content-section {
        background: rgba(255,255,255,0.1);
        padding: 40px;
        margin: 30px 0;
        border-radius: 15px;
        backdrop-filter: blur(10px);
    }
    
    .scroll-top-button {
        position: fixed;
        bottom: 30px;
        right: 30px;
        width: 60px;
        height: 60px;
        background: linear-gradient(45deg, #ff6b6b, #ee5a24);
        color: white;
        border: none;
        border-radius: 15px;
        font-size: 20px;
        cursor: pointer;
        box-shadow: 0 8px 25px rgba(238, 90, 36, 0.3);
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
    
    .scroll-top-button.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .scroll-top-button:hover {
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 12px 30px rgba(238, 90, 36, 0.4);
    }
    
    .scroll-top-button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 16px;
        border-left: 3px solid white;
        border-top: 3px solid white;
        transform: translate(-50%, -40%) rotate(45deg);
    }
</style>
</head>
<body>
    <h1>Advanced Scroll to Top Button</h1>
    
    <div class="content-section">
        <h2>Beautiful Design</h2>
        <p>This example features a more sophisticated scroll to top button with smooth animations and modern styling.</p>
    </div>
    
    <div class="content-section">
        <h2>Animation Effects</h2>
        <p>Notice how the button fades in smoothly when you scroll down and has a bounce effect on hover.</p>
    </div>
    
    <div class="content-section">
        <h2>CSS Transforms</h2>
        <p>The button uses CSS transforms for smooth animations and a custom arrow icon created with pure CSS.</p>
    </div>
    
    <button class="scroll-top-button" id="scrollTopBtn"></button>
    
    <script>
        const scrollTopBtn = document.getElementById('scrollTopBtn');
        
        scrollTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
        
        window.addEventListener('scroll', () => {
            if (window.pageYOffset > 300) {
                scrollTopBtn.classList.add('visible');
            } else {
                scrollTopBtn.classList.remove('visible');
            }
        });
    </script>
</body>
</html>

A colorful gradient page with glass-effect content sections appears. After scrolling down 300px, an orange gradient button with a CSS arrow smoothly fades in from the bottom-right. The button has sophisticated hover animations and bouncy transitions.

Key Properties

Property	Purpose	Common Values
`position: fixed`	Keeps button in viewport	fixed
`bottom, right`	Positions button	20px, 30px
`opacity`	Controls visibility	0 (hidden), 1 (visible)
`transition`	Smooth animations	all 0.3s ease

Conclusion

A scroll to top button enhances user experience by providing quick navigation on long pages. Use position: fixed for positioning, smooth animations for better UX, and JavaScript to control visibility based on scroll position.

AmitDiwan

Updated on: 2026-03-15T14:34:10+05:30

710 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next