Features

  • 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

Example

The Scroll to Top example for this page is is the blue button located in the bottom right-hand corner of the page. Once you’ve scrolled down the page far enough, in this case 400 px, the button animate in. Upon clicking it you’re returned to the top of the page. Give it a try!


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.

Sign up for The Forge newsletter

Stay up to date on future versions of Foundry, as well as important news, updates and more!

This site is built using Foundry for RapidWeaver

© 2006-2018 Elixir Graphics | Contact Us