Back to Top on Version 2.16

Preview this component (Custom Element; v2.3.0; 9/29/2021)

Guidelines using the component

Technical Information

This automatically goes to the bottom of the page and disappears when the user is at the top of the page. So this won't show up in the regular spot in the builder.

Description

The Illinois components back-to-top allows you to provide a simple way to skip either to the top of a page or to a designated point in the page (such as the page content area). You can choose alternate Illinois brand colors and adjust the position of the arrow.

Recommended patterns

We encourage using a back-to-top element on every page.
The tag should be placed at the very end of the page, even after the footer content.
By default, the tag will scroll the page up to the top of the page.
If you wish to jump to the top of the content body rather than the top of the page, you can use the content body ID as the target and alter the alt text from “back to top” to “go to content” (or something similar).

Component Display

Change Your Content and Options

Template -- enter raw HTML here

Template Options

Important Classes

N/A

Classes

N/A

Attributes

target (The ID of the element which represents the top of the page. If provided, the page will scroll to this element.)alt (The accessible text label of the button, defaults to 'Back to top')

Advanced Options

These options are only to be used in advanced situations -- most of your needs should be met through the attributes and classes, and this breaks the intent of having a unified design.

Custom Style Tag before text

--il-back-to-top-foreground-color (Color of the back to top)
--il-back-to-top-background-color (Background color of the back to top)

How to add it to your page

Copy and paste this in your page. Remember

Make sure you have updated your component to make sure the below code is completed.
Make sure you have the Header code in your header.

Note that this uses the custom style 'builder-custom'. You may need to change this if you are using multiple versions of this component with different styles.

Copied to clipboard