Back to Top

Back to Top provides a floating button that appears when users scroll down, allowing quick return to the page top. Perfect for long pages, documentation, and content-heavy sites.

Key Features

Auto Show/Hide - Appears after scrolling threshold
Smooth Scrolling - Configurable animation duration
Positioning - Bottom-right, bottom-left, or custom
Callbacks - onShow and onHide events

Basic Usage


const backToTop = Domma.elements.backToTop('#back-to-top', {
    showAfter: 300,
    duration: 600,
    position: 'bottom-right'
});

Quick Start

Simple Back to Top Button

Scroll down this demo area to see the button appear

Scroll down...

Keep scrolling...

Almost there...

You should see the button now!


<button id="back-to-top" class="back-to-top-btn">↑</button>

<script>
Domma.elements.backToTop('#back-to-top', {
    showAfter: 200,
    duration: 500
});
</script>

Tutorial

Build a back to top button with custom styling and callbacks.

Long Article Content

Scroll down to see the custom back to top button...

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Section 2

Sed do eiusmod tempor incididunt ut labore et dolore.

Section 3

Ut enim ad minim veniam, quis nostrud exercitation.

Section 4

Duis aute irure dolor in reprehenderit in voluptate.

Button status: Hidden


const backToTop = Domma.elements.backToTop('#back-to-top', {
    showAfter: 300,
    duration: 600,
    position: 'bottom-right',
    offset: { bottom: 20, right: 20 },
    target: '#scrollable-container',
    onShow: () => {
        console.log('Button shown');
        document.getElementById('status').textContent = 'Visible';
    },
    onHide: () => {
        console.log('Button hidden');
        document.getElementById('status').textContent = 'Hidden';
    }
});

Examples

Different Positions

Scroll to see buttons at different positions...

Bottom right button appears first

You should see the buttons now

Custom Duration

Try different scroll speeds...

Scroll down to see the button

Programmatic Control

Use buttons above to control the back to top button

Scroll position tracked

Best Practices

Accessibility

Keyboard Access - Ensure button is keyboard focusable
ARIA Label - Add aria-label="Back to top" for screen readers
Focus Visibility - Provide clear focus indicator

UX Guidelines

Threshold - Show after 200-400px scroll for optimal UX
Positioning - Bottom-right is conventional, but avoid blocking content
Animation Duration - 400-800ms provides smooth but quick scrolling
Visual Clarity - Use clear up arrow (↑) or icon

Performance

Throttle Scroll Events - Component automatically throttles scroll listeners
Destroy When Done - Call destroy() on single-page apps when navigating

API Reference

Option	Type	Default	Description
`showAfter`	Number	`300`	Scroll pixels before showing button
`duration`	Number	`500`	Scroll animation duration (ms)
`position`	String	`'bottom-right'`	Position: bottom-right, bottom-left
`offset`	Object	`{ bottom: 20, right: 20 }`	Offset from edges (px)
`target`	String/Element	`window`	Scroll target (default: window)
`onShow`	Function	`null`	Show callback
`onHide`	Function	`null`	Hide callback

Methods

Method	Parameters	Description
`scroll(duration)`	duration (optional)	Scroll to top with optional custom duration
`show()`	-	Show button immediately
`hide()`	-	Hide button immediately
`toggle()`	-	Toggle button visibility
`isVisible()`	-	Check if button is visible
`getButton()`	-	Get button element
`destroy()`	-	Remove button and clean up

Config Engine


$.setup({
    '#back-to-top': {
        component: 'backToTop',
        options: {
            showAfter: 400,
            duration: 600,
            position: 'bottom-right',
            onShow: () => console.log('Button appeared'),
            onHide: () => console.log('Button hidden')
        }
    }
});