Component: Back to Top 1.1

This builder will allow you to generate a custom version of the Back to Top component.

The component will show up in between the pink lines below. The pink lines will not show up in production -- they are only used to allow you to view margins and paddings. In the case of specialized components (things that are meant to be invisible or have a fixed location), the component may not display in this area.

Template -- enter raw HTML here

Samples:

Enter raw HTML here

Attributes, Classes, and CSS Variables

target (text attribute)

The ID of the element which represents the top of the page. If provided, the page will scroll to this element.

alt (text attribute)

The accessible text label of the button, defaults to 'Back to top'

Custom CSS Variables and Styles (advanced use only)

Parent style:

--ilw-back-to-top--color

Hex color of the arrow and border

--ilw-back-to-top--background

Background hex color

--ilw-back-to-top--bottom

Position in pixels from the bottom of the screen

--ilw-back-to-top--right

Position in pixels from the right of the screen

HTML listed here

This parent has a style of that is not figured into the source HTML. You can change this by opening the Custom CSS Variables and Styles and editing the parent style.

Details

The Illinois component 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).

Full Version: 1.1

Type: web component

Date Created: 2/18/2025

Version notes:

Github repository: https://github.com/web-illinois/ilw-back-to-top

Javascript file: https://cdn.toolkit.illinois.edu/ilw-back-to-top/1.1/ilw-back-to-top.js

CSS file: https://cdn.toolkit.illinois.edu/ilw-back-to-top/1.1/ilw-back-to-top.css

JSON information: ilw-back-to-top.1.1.json