Scroll To Top

Base Foundry stack

Add a stylish, animated button to your pages that allows your visitors to conveniently return to the top of your pages.

  • Choose which side of the page to place the button on
  • Choose animation styles for animating in and out
  • Choose trigger distance (distance scroll before showing button)
  • Set animation speed
  • Style with presets or custom colors
  • Set scroll to top speed
  • Please Note: Features on this page marked with the purple moon icon are compatible with Foundry's Dark Mode.

Example

Since the Documentation pages are built using our new Partitions stack, which is a fixed position style stack, Scroll To Top does not trigger its scroll animation while scrolling within Partitions. To show off the Scroll To Top stack we've built a simple examples page separate from this documentation page.

Using Scroll To Top

Style

Style
Choose from one of Foundry’s built-in color swatches for your Scroll to Top button or use the RapidWeaver color picker to set the background and arrow colors yourself.

Animation

Animate In & Animate Out
Set which animation styles you would like the stack to use when animating the Scroll to Top button onto and off of the page. You can set the In and Out animations independent of one another.

Scroll Up Speed
Decide how fast you’d like the the page to scroll to the top by setting the amount of time it will take, in milliseconds, for the page to scroll upwards.

Trigger Distance
Lets you dictate when the Scroll to Top button will appear by setting the distance down the page the visitor must scroll before it will animate in.

Placement

Alignment
Allows you to decide which side of the page you’d like to place the Scroll to Top button. The button always appears at the bottom of the page.

Offset
This feature lets you set a horizontal and vertical offset for your Scroll To Top trigger button. The adjusts the distance out from the side and bottom of the browser’s window.

Insight
Scrollability

The Scroll To Top stack's functionality is based around scrolling the browser window itself. Stacks like the Partitions stack, which don't allow the browser itself to scroll, but instead its inner contents scroll by itself, will not allow the Scroll To Top stack to function. So keep this in mind when building your pages — the Scroll To Top stack will not work within the Partitions stack.