Illinois web toolkit documentation

Version 2.7.3

Component

Back to Top

Contents

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. 

What it looks like 

Example image (version 2.4, Dec. 8, 2021) 

Try it out 

  • We encourage using a back-to-top element on every page. 
  • The <il-back-to-top> tag should be placed at the very end of the page, even after the footer content. 
  • By default, <il-back-to-top> 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). 

The standard use case: 

<il-back-to-top></il-back-to-top> 

Customizations and notes 

Changing target points 

This code will aim for a different target (in this case, an ID tag called “content”): 

<il-back-to-top target=”content” alt=”Go to content”></il-back-to-top>

Changing colors and positions 

The component builder also offers other color patterns and other positions.  

You can change both the background and the foreground color to your choice of Illinois blue, Illinois orange, and white. (The default is a white foreground and an Illinois blue background.) 

You can also change how far the back-to-top arrow is positioned from the bottom right corner of the screen. (The default is 2 em up and 2 em left.) 

This CSS snippet and code example provides a blue arrow on an orange background: 

(In your CSS area) 

<style> 
 --il-back-to-top-foreground-color: var(--il-blue) !important; 
 --il-back-to-top-background-color: var(--il-orange) !important; } 
</style> 

(At the end of the page:) 

<il-back-to-top class="builder-custom"></il-back-to-top> 

See the syntax guide below for a detailed breakdown of the color options and positioning options available. 

Syntax guide 

(Replace elements in bold to match your content.)

The default syntax: 

<il-back-to-top></il-back-to-top> 

Where to add elements: 

<il-back-to-top (Attributes can go here)> (Do not add anything here) </il-back-to-top> 

Additional attributes for this component: 

target 

  • Syntax:
target=”your target ID”
  • Value: The ID  of an alternative location where you would like the item to scroll to 
  • Default value: Nothing  
  • Required: No. If no target is specified, clicking the button will scroll to the top of the screen. 
  • Details: The tag of the container where you would like the page to scroll up to should contain your target ID 

alt 

  • Syntax:
alt=”text for a screen reader”
  • Value: Text that will describe for a screen reader where in the page clicking this button will land you. 
  • Default value: “Back to top” (which you don’t need to write in the tag) 
  • Required: Not if your target is the top of the page. If your target is a different location Iin the page, you should describe where the person reading the page will arrive. 
  • Details: This is paired with an alternative target location (see the target attribute). If you haven’t changed the target, you don’t need to add this alt text either. 

CSS options 

–il-back-to-top-background-color 

  • Syntax:
--il-back-to-top-background-color: var(--color value) !important;
  • Color values available: 
    • –il-blue 
    • –il-orange 
    • white 
  • Default value: If nothing else is specified, the background will display as –il-blue 
  • Required: No 
  • Details: Put –il-back-to-top-background-color in your CSS styles collection, associated with a style that you can apply to your il-back-to-top item. See “Changing colors and positions” for a more detailed code example. 

–il-back-to-top-foreground-color 

  • Syntax:   
--il-back-to-top-foreground-color: var(--color value) !important;
  • Color values available: 
    • –il-blue 
    • –il-orange 
    • white 
  • Default value: If nothing else is specified, the foreground (arrow) will display as white 
  • Required: No 
  • Details: Put –il-back-to-top-foreground-color in your CSS styles collection, associated with a style that you can apply to your il-back-to-top item. See “Changing colors and positions” for a more detailed code example. 

–il-back-to-top-position-x [[Needs Validation]]

  • Syntax:  
--il-back-to-top-position-x: 3em !important;
  • Measurement values available: 
    • em 
    • (do you accept pixel  or percentage values?) 
  • Default value: If nothing else is specified, the button will appear 2 em in to the left, starting from the lower right corner of the screen. 
  • Required: No 
  • Details: Put –il-back-to-top-position-x in your CSS styles collection, associated with a style that you can apply to your il-back-to-top item. See “Changing colors and positions” for a more detailed code example. 

–il-back-to-top-position-y [[Needs Validation]]

  • Syntax:  
--il-back-to-top-position-y: 3em !important;
  • Measurement values available: 
    • em 
    • (do you accept pixel  or percentage values?) 
  • Default value: If nothing else is specified, the button will appear 2 em up from the bottom, starting from the lower right corner of the screen. 
  • Required: No 
  • Details: Put –il-back-to-top-position-x in your CSS styles collection, associated with a style that you can apply to your il-back-to-top item. See “Changing colors and positions” for a more detailed code example. 

About this component 

  • Type: Custom Element 
  • Introduced in: v2.3.0; 9/29/2021 
  • Deprecated?: No