BackToTop

A lightweight and reusable Back to Top component for OutSystems Reactive Web applications. It automatically detects the active scrollable area, displays a floating button after the configured scroll threshold, and smoothly returns users to the top of the page.

Key Features

• Automatic scroll detection: Works with both browser-window scrolling and inner scrollable containers.
• Configurable threshold: Control when the button appears using the ScrollThreshold input.
• Smooth scrolling: Returns users smoothly to the top of the detected scrolling area.
• Reduced-motion support: Uses instant scrolling when the user has enabled reduced-motion preferences.
• Animated visibility: The button fades and slides into view after the threshold is crossed.
• Built-in tooltip: Displays Back to top on hover or focus.
• Navigation-safe: Removes previous event listeners to prevent duplicate behavior.
• Responsive positioning: Remains fixed in the bottom-right corner.
• No external dependencies: Uses only CSS and JavaScript included in the component.

Input Parameter

ScrollThreshold

Defines the vertical distance, in pixels, the user must scroll before the button appears.

• Data type: Integer
• Default value: 300
• Required: No
• Values of 0 or less automatically use 300

How to Use

1. Add the dependency

Open Manage Dependencies in your application:

1. Search for the BackToTop component.
2. Select the BackToTop block.
3. Apply the dependency changes.

2. Add the block to your Layout

Open the Layout used by your application screens and drag the BackToTop block onto it.

Place the block at the top level of the Layout so it is available across all screens using that Layout.

Do not place the block inside a Footer, animated container, or container using CSS transform. These containers can affect the button’s fixed positioning.

3. Configure the threshold

Set the ScrollThreshold input:

4. Publish and test

1. Publish the application.
2. Open a screen with enough scrollable content.
3. Scroll beyond the configured threshold.
4. The button appears in the bottom-right corner.
5. Select it to return to the top.

Troubleshooting

If the button does not appear:

• Confirm that the screen has enough content to scroll.
• Verify that the scroll position exceeds ScrollThreshold.
• Ensure the block is placed at the top level of the Layout.
• Check that no parent container uses CSS transform.
• Open the browser console and look for:

Known Limitation

Use only one BackToTop instance per Layout or Screen. The current implementation uses a shared cleanup handler to manage its JavaScript event listeners.