Scroll Location

Indicate to your visitors just how far they’ve scrolled down your page using this tool. This helps to give them a sense of how far they’ve come and how far they have left to go.

Examples

No Example

The Foundry Documentation pages are built using the Partitions tool, which creates fixed position layouts. Scroll Location works by monitoring the scrolling of the page itself, and cannot monitor the scrolling within Partitions' fixed layout.

No, ma'am. We at the FBI do not have a sense of humor we're aware of.

While a simple tool, Scroll Location helps us to give visitors a sense of space and an expectation of the amount of time the page and its content might be asking of them.

Settings

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

Page Location

Position

By default the Scroll Location tool's progress bar is affixed to the bottom of the page. Here though we can choose whether we should place it at this default location or instead at the top of the page.

Height

Height

This setting allows you to adjust the height, or thickness, of the progress bar which shows the current scroll location feedback.

Height Units

Choose here the unit of measure you'd like to use in determining the height of the progress bar.

Styling

Inset Shadow

When enabled an inner shadow will be applied in the Bar Background as a way to make the progress bar look inset within the page.

Progress Bar Style

Allows you to use one of Foundry's presets from the color palette or extended color palette, as well as the grey, white and dark preset values for the progress bar. You're also provided an option to choose a custom one-off color as well.

Bar Background

This color picker is where you'll set the background of the progress bar's container. This is essentially the space behind the progress bar itself, and also where the Inset Shadow is applied if you've enabled it.

Add Stripes to Progress Bar

Enabling this feature adds a set of decorative stripes to the progress bar.

Scroll Location Value

Include Value on Progress Bar

This setting will add the percentage value of the scroll location within te progress bar. This gives the visitor an even better idea of their current location.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.