FeaturesCMSComponents

Scroll to Top

Enable users to quickly navigate back to the top of long pages with a smooth scroll-to-top button.

The ScrollToTop component automatically shows/hides based on scroll position and provides smooth scrolling back to the top.

A floating scroll-to-top button that appears when users scroll down a page, helping them quickly return to the top with smooth scrolling animation.

Installation

Install the required dependencies:

The ScrollToTop component requires the kit packages for UI components.


pnpm add '@kit/cms@workspace:*'

Make sure that the following kit packages are present in your project:

The ScrollToTop component uses internal kit packages that should already be available in your project:

@kit/ui/button - Button component
@kit/ui/icon - Icon components
@kit/shared - Utility functions

Copy and paste the following code into your project.

components/ui/scroll-to-top-button.tsx

'use client';

import { cn } from '@kit/shared';
import { Button } from '@kit/ui/button';
import { Icon } from '@kit/ui/icon';
import React from 'react';

export interface ScrollToTopButtonProps {
    className?: string;
    removeTopSeparator?: boolean;
}

export function ScrollToTopButton({ className, removeTopSeparator = false }: ScrollToTopButtonProps): React.JSX.Element {
    const [isVisible, setIsVisible] = React.useState(false);

    React.useEffect(() => {
        const toggleVisibility = () => {
            if (window.pageYOffset > 300) {
                setIsVisible(true);
            } else {
                setIsVisible(false);
            }
        };

        window.addEventListener('scroll', toggleVisibility);

        return () => window.removeEventListener('scroll', toggleVisibility);
    }, []);

    const scrollToTop = () => {
        window.scrollTo({
            top: 0,
            behavior: 'smooth',
        });
    };

    return (
        <div
            className={cn(
                'transition-all duration-300 ease-in-out',
                isVisible ? 'opacity-100' : 'pointer-events-none opacity-0',
                className,
            )}
        >
            {!removeTopSeparator && <div className="mt-3 border-t" />}
            <Button
                onClick={scrollToTop}
                variant="ghost"
                size="sm"
                className={
                    'text-muted-foreground mt-3 flex w-full items-center justify-start gap-x-1.5 text-left text-sm'
                }
                type="button"
                aria-label="Scroll to top"
            >
                Scroll to top
                <Icon.circleArrowUp className="h-4 w-4" />
            </Button>
        </div>
    );
}

Update the import paths to match your project setup.

Usage

import { ScrollToTopButton } from '@kit/cms/ui/scroll-to-top-button';

// Place at the bottom of your page or layout
<div className="fixed bottom-0 right-0 p-4">
    <ScrollToTopButton />
</div>

Features

Auto-show/hide: Appears when scrolled more than 300px from top
Smooth scrolling: Animates smoothly back to the top
Accessible: Proper ARIA labels and keyboard navigation
Responsive: Works on all screen sizes
Performance optimized: Efficient scroll event handling

API Reference

ScrollToTopButtonProps

Prop	Type	Default
`className`	`string`
`removeTopSeparator`	`boolean`

AskAI

Enable users to ask AI questions about your content with integrated LLM endpoints.

Table of Contents

Enable users to navigate through your content with an interactive table of contents and progress indicator.

How is this guide?

Last updated on 10/17/2025