ScrollTop

Usage

Choose target="window" to observe page scrolling, or target="parent" for the immediate parent element. Give that parent a bounded height and overflow:auto. threshold is a vertical scroll distance in pixels; the button appears above it. behavior chooses auto or smooth scrolling. The default chevron is built in and needs no icon provider.

Examples

Try the interaction and open Code for the complete implementation.

Try and configure

Change the options, try the result and see the template update. Code contains the full executable example.

<neu-scroll-area
  maxHeight="16rem"
  [mask]="false"
  ariaLabel="Scrollable reading panel"
>
  <!-- Add your scrollable content here. -->
  <neu-scroll-top
    target="parent"
    behavior="smooth"
    [threshold]="100"
  [buttonAriaLabel]="'Back to top'"
/>
</neu-scroll-area>

Data and content

ScrollTop observes browser scroll state and scrolls its target when activated. It has no Outputs. icon resolves an optional application-provided icon key; neuScrollTopIcon replaces the visual icon with projected content while preserving the native button label.

Accessibility and keyboard

Translate buttonAriaLabel to describe the destination. Tab reaches the visible button; Enter or Space activates it. Decorative Template icons should be aria-hidden. The component checks browser availability and does not access a missing window during server rendering.

API

Inputs and Outputs match the installed package. Named types link to definitions. Every available Template has a Demo and Code example.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

import { NeuScrollTopIconDirective } from '@neural-ui/core/scroll-top';

// Public declaration (reference only)
export declare class NeuScrollTopIconDirective {
}

import { NeuScrollTopIconDirective } from '@neural-ui/core/scroll-top';

// Public declaration (reference only)
readonly templateRef: TemplateRef<void>;

Public Types

Open a type to inspect its definition and interface fields.

import type { NeuScrollTopBehavior } from '@neural-ui/core/scroll-top';

// Public declaration (reference only)
export type NeuScrollTopBehavior = 'auto' | 'smooth';

import type { NeuScrollTopTarget } from '@neural-ui/core/scroll-top';

// Public declaration (reference only)
export type NeuScrollTopTarget = 'window' | 'parent';

Styles and tokens

Customize supported public tokens and check both themes. Example illustrations and application state are not Core inputs.

Related components

Use related components to complete your interface.

• ScrollArea