Docs
FeaturesCMSComponents
PreviousNext

Scroll to Top

Floating button to jump to top of long content pages.

What It Does

ScrollToTopButton appears after scrolling and performs smooth return to top.

When To Use

  • Documentation/blog pages with long vertical content.

Prerequisites

  • None beyond @kit/cms and @kit/ui dependencies.

How To Use

import { ScrollToTopButton } from '@kit/cms/ui/scroll-to-top-button';
 
<div className="fixed right-4 bottom-4">
  <ScrollToTopButton />
</div>
components/ui/scroll-to-top-button.tsx
'use client';

import { Button } from '@kit/ui/button';
import { Icon } from '@kit/ui/icon';
import { cn } from '@kit/utils';
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 name="CircleArrowUp" className="h-4 w-4" />
            </Button>
        </div>
    );
}

API Reference

ScrollToTopButtonProps

PropTypeDefault
className
string
removeTopSeparator
boolean

MCP Context

capability: scroll_to_top_ui
entrypoints:
  - @kit/cms/ui/scroll-to-top-button
inputs:
  - page_scroll_position
outputs:
  - jump_to_top_interaction
constraints:
  - should be rendered in a visible fixed/sticky area
side_effects:
  - scroll position changes

Agent Recipe

  1. Place button in page shell/layout.
  2. Verify visibility threshold and scroll behavior.

Troubleshooting

  • If button never appears, verify page actually scrolls and component mounts client-side.

Related

AskAI

Add an AI-assistant launcher tied to markdown/LLM endpoints.

Table of Contents

TOC components for structured long-form content navigation.

How is this guide?

Last updated on 3/23/2026