Back to Top Button

The Back to Top Button widget displays a button that when clicked will scroll a user’s browser back to the top of the page. The button can be extensively styled and set to appear when a user scrolls down the page.

Setup

WIDGET PLACEMENT

  • Drop the widget onto your page.
  • Widget placement: There are a few things to keep in mind when placing the widget.
  1. The placeholder you see when you place the widget will not be seen when you publish your site. You will see it, however, when previewing your site.
  2. If you would like the Back to Top button to be seen on every page of your site, place it in the header or footer of any page.
  3. If you would like the Back to Top button to appear only on certain pages, place the widget in the body of those pages only.

BUTTON SETUP

  • Button Text: This is the text that will appear in the button. You may leave this blank if you want an icon-only button. Icon-Only buttons are described in detail later on.
  • Disable Icon: Use this if you wish to disable the icon or have a text-only button.
  • Trigger Position: The number value represents the amount of scroll needed to trigger the button’s appearance. Larger numbers mean longer scrolls will be required for the button to appear.
  • Button Alignment: This determines whether the button will be displayed left, center or right, along the bottom of the page.
  • Offset Settings: These set the amount of space the button will have between the side of the browser and the bottom of the browser. The left and right offset options will appear accordingly as the Button Alignment setting is updated.
  • Scroll to Top Speed and Hover Transition Speed determine how long the scroll to top and hover transition will take.

DESIGN SECTION

This section allows customization of button styling, fonts, color and more. These settings won’t be covered in detail here because the setting titles are self-explanatory.

ICON-ONLY BUTTON SETUP

If you prefer to use a button with an icon only (no text), follow these instructions:

  • Delete any text in the Button Text field.
  • Go to the Design section (use the Design tab at the top of the panel)
  • Set the Font Size to zero.

ROUND BUTTON SETUP

To create a round button, follow these instructions:

  • A round button works best with an icon-only button setup, or a single text character.
  • Set the Border Radius in the Design section to its highest value of 50.
  • The button will now take on a round shape. You may want to adjust the Button Height and Button Width to taste.