Scroll To

Base Foundry stack

Add a button to your page that will automatically scroll the browser to a different location on the page, pre-defined by placing a child-stack on your page.

  • Easily set the scroll target by simply dragging the child-stack to the destination.
  • Customize button to fit your page style.
  • Add a tooltip to your trigger button.
  • Configure button with either a text or icon label.
  • Use the Typeface stack to assign font choices to Scroll To button
  • Configure page scroll animation type, speed and offset.
  • Set custom corner roundness for Scroll To button
  • 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 does not trigger its scroll animation while scrolling within Partitions. To show off the Scroll To stack we've built a simple examples page separate from this documentation page.

Using Scroll To

Target

Target ID
Match this ID number to that of the Target child-stack’s ID number. This pairs them together so the stack knows where specifically to scroll to.

Button

Button Label
Choose whether to have your label consist of either text or an icon.

Button Text
Insert your custom text that will appear on your button.

Font v2
Allows you to choose to use the Base Font assigned in the Foundry Control Center or to assign a Typeface based font to your Button text.

Font Weight v2
Use this setting to adjust the font weight of your Button text when you've assigned them a Typeface font. If you're using the Control Center's Base Font instead of a Typeface font your font weight will be set to match the Base Font's settings.

Italic v2
Allows you to italicize your Button text.

Icon
Choose from over 300 different icons for your button label.

Block Button
Enable to make the Button span the entire width of the form. The button’s width is flexible when enabled and will size down to fit the available space.

Size
Choose the size of your button. You can opt of a Small, Standard or Large button size.

Style
Set the color of the Button to match your site using one of Foundry’s color swatch presets or make use of custom color pickers.

Outline
When using one of the color swatch presets you can use the Outline feature to inverse the button’s style.

Alignment
Allows you to set the justification of the Button itself. You can set the alignment to Left, Center or Right.

Animation

Animation Easing
Choose from some preset animation styles for the animation that is executed when the page scrolls to the target child-stack.

Duration
The time it takes for the page to scroll from the button to the target child-stack.

Target Offset
The distance from the top of the target child-stack at which the animation will end.

Advanced

Tooltip
Add a popup tooltip to your Scroll To button. You can then set the tooltip text and its location, which can be set to either bottom, top, left or right.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!
Child Stack

Target

To set the destination drag the child-stack from within the Scroll To stack to the location on the page where you wish to have the page scroll to when the button is clicked.

Target ID
Match this ID number to that of the Scroll To stack’s ID number. This pairs them together so the main Scroll To stack knows where specifically to scroll to.

Insight
Scrollability

The Scroll To 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 stack to function. So keep this in mind when building your pages — the Scroll To stack will not work within the Partitions stack.