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.

By default the Scroll To tool acts as a Scroll To Top button, allowing the visitor to return to the top of the current page. You can change the destination to the Anchor option to choose a custom location to scroll to using the Foundry Anchor tool as the destination.

When using the Anchor destination as your location to scroll to, this is where you'll add the unique ID of your Anchor tool. This tells Scroll To where exactly on the page to scroll the page to.

In real life most objects don’t just start and stop instantly, and rarely move at a constant speed. The Scroll Easing setting allows us to apply some of this real world feel to our page as it scrolls. We've provided several styles to help you get the feeling you are after.

You can opt to use either a Button or an Image as the trigger which will cause the page to scroll. By default we populate the parent tool with a Button, but if you'd like to use an Image instead, simply delete the Button child item in Edit Mode and click the small + button to add an Image instead.

We use the Foundry Button / Image tools for the triggers, so you'll have access to all of their settings for styling, etc. when you click on them in Edit Mode. Be sure not to set a link on the button or image however as the Scroll To parent tool will take care of this for you.

Here you can decide whether you'd like to position the Scroll To trigger in a fixed position in one of the four corners of the browser window, or leave it inline where you've placed it in Edit Mode.

Generally Fixed positioning is used for a Scroll To Top style button, where clicking on the trigger returns the visitor to the top of the page, where as inline is mostly used for Anchor-based destinations elsewhere on the page. That said, the option to change this is up to you.

These controls are used for the Fixed positioning of the trigger and allow you to place the trigger in one of the four corners of the browser window.

Allows you to adjust the layering of thwe trigger element using a custom z-index value.

Here you can specify how far from the browser edge, in both the horizontal and vertical directions, that you'd like to offset the trigger.

When enabled the trigger will be hidden until the visitor has scrolled the browser window a set distance (configurable below). Once the distance has been reached the trigger will animate in and become visible.

This is the distance the visitor will need to scroll before the trigger becomes visible.

Here you'll choose the animation effect that will be applied to the trigger once the scroll distance has been reached.

Controls the length of your trigger animation. You can also think of the Duration setting as a sort of Speed setting. The larger the value here the longer the animation runs, which also translates to a slower animation. A shorter value will result in a quicker animation. When using Custom Animations you can set a duration for the animation process both as it animates in and as it animates out.

Used to delay the trigger animation. The delay period begins when the animation would normally be triggered.

In real life most objects don’t just start and stop instantly, and rarely move at a constant speed. The Easing setting allows us to apply some of this real world feel to our animated objects. We've provided several styles to help you get the feeling you are after.

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.

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

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.