End User Manual

The Scroll Up module adds a configurable button that allows users to quickly return to the top of a page.

The button can be customized through the module configuration and supports multiple appearance, positioning, behavior, accessibility, and mobile options.

Configuration

Enable Scroll Up Button

The Enable Scroll Up button option allows administrators to enable or disable the Scroll Up button globally.

When disabled, the button will not be displayed to users.

Appearance

Button Position

The module includes several predefined button positions:

• bottom-right
• bottom-left
• bottom-center
• top-right
• top-left
• top-center

Custom Position

Selecting Custom allows you to define your own CSS positioning rules.

For example:

right: 30px;
bottom: 80px;

The custom position is useful when the button needs to avoid overlapping other interface elements.

Button Color

You can configure the primary color of the Scroll Up button.

The color field supports standard CSS color values, including:

• Hexadecimal colors such as #000000
• CSS variables such as var(--bs-primary)
• RGB colors such as rgb(0, 0, 0)
• RGBA colors such as rgba(0, 0, 0, 0.8)
• HSL and HSLA colors

When no custom color is configured, the module uses the active Bootstrap theme color.

Hover Color

The Hover Color option controls the button color when a user moves their cursor over it.

When no hover color is configured, the module uses the default Bootstrap secondary color.

Icon

You can choose from several icons for the Scroll Up button:

• Chevron Up
• Arrow Up
• Angle Up
• Double Up

Button Size

The following button sizes are available:

• Small
• Medium
• Large

Button Shape

The following button shapes are available:

• Circle
• Rounded Square
• Square
• Pill

Scroll Behavior

Show After Scrolling

The Show After Scrolling option controls how far a user must scroll before the Scroll Up button becomes visible.

The value is measured in pixels.

For example:

300

The button will remain hidden until the user has scrolled at least 300 pixels down the page.

Scroll Behavior

The module supports two scrolling modes:

Smooth

The page smoothly animates back to the top.

Instant

The page immediately returns to the top without an animation.

Animation Duration

The Animation Duration option controls how long the smooth scrolling animation takes.

The value is measured in milliseconds.

For example:

450

This creates a smooth scrolling animation lasting 450 milliseconds.

Bottom Offset

The Bottom Offset option controls the distance between the Scroll Up button and the bottom of the page.

The value is measured in pixels.

For example:

30

Smart Auto-Hide

The Smart Auto-Hide option automatically hides the button while the user is scrolling downward.

The button becomes visible again when the user begins scrolling upward.

This helps reduce unnecessary visual clutter while browsing long pages.

Scroll Progress Indicator

The Show Scroll Progress option displays a visual indicator around the Scroll Up button.

The indicator shows the user's progress through the current page.

Mobile Devices

The Enable on Mobile Devices option controls whether the Scroll Up button is available on mobile devices.

When disabled, the button will only be available on larger devices.

Accessibility

The Scroll Up module includes accessibility features designed to improve usability for all users.

Reduced Motion Support

The module respects reduced-motion preferences when supported by the user's device or browser.

This helps reduce unnecessary animations for users who prefer less motion.

Keyboard Accessibility

The Scroll Up button supports keyboard interaction, allowing users to access and activate the button without requiring a mouse or touch input.

Recommended Configuration

For most installations, the following configuration provides a balanced experience:

• Position: Bottom Right
• Scroll Threshold: 300 pixels
• Scroll Behavior: Smooth
• Animation Duration: 450 milliseconds
• Button Size: Medium
• Button Shape: Rounded Square
• Smart Auto-Hide: Enabled
• Scroll Progress: Disabled
• Mobile Support: Enabled