Lumeo

BackToTop

A floating button that appears when the user scrolls down and smoothly scrolls back to the top.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<BackToTop />

When to Use

  • Long scrolling pages where returning to the top is tedious
  • Content-heavy layouts such as blogs, documentation, or feeds
  • Pages with anchor navigation that benefit from a quick scroll reset
  • Any page where users frequently need to return to the header or nav

Scroll down the page to see the BackToTop button appear in the bottom-right corner.

The button appears after scrolling past 300px by default.

Set VisibilityThreshold to control when the button appears.

VisibilityThreshold: 300 px

Scroll down inside this box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed commodo posuere pede. Mauris ut est.

Ut quis purus. Sed ac odio. Sed vehicula hendrerit sem. Duis non odio. Morbi ut dui. Sed accumsan risus eget odio. In hac habitasse platea dictumst.

Pellentesque non elit. Fusce sed justo eu urna porta tincidunt. Mauris felis odio, sollicitudin sed, volutpat a, ornare ac, erat. Morbi quis dolor.

Donec pellentesque, erat ac sagittis semper, nunc dui lobortis purus, quis congue purus metus ultricies tellus. Proin et quam.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue.

Sed commodo posuere pede. Mauris ut est. Ut quis purus. Sed ac odio. Sed vehicula hendrerit sem. Duis non odio. Morbi ut dui.

Scroll inside the preview container to see the BackToTop button appear once you pass the threshold.

API Reference

Property Type Default Description
VisibilityThresholdint300Scroll distance in pixels before the button appears.
ChildContentRenderFragment?nullCustom content replacing the default arrow icon.
DisabledboolfalseHides the button and disables scroll tracking entirely.

Related Components

  • ScrollArea — Custom scrollbar for contained scrollable regions
  • Button — The underlying element used for the floating action