Anchor link

Back-to-top links lead the user to the top of the page from another part of the page. While these links duplicate the functionality of the scroll bar, they can be useful on long pages where a single click saves time over multiple scrolls. Such links tend not to harm users who do not use them (except if they cover content), and aid users who do.

When users get to the bottom of a long page, they often need to get back to the top to:

  • See the navigation menu and choose a new destination
  • Access filtering and sorting features
  • Enter or edit a query in the search box

In-page links ( Next/Previous section) can be used as a table of contents for longer content, giving users direct access to the content of interest. They help by:

  • Enabling the content of longer pages to be summarized and understood
  • Making it easier to recognize the section currently being viewed
  • Providing easier access to sections of a longer page
  • Facilitating easier movement between different page sections

For long pages, provide an always-available option to go back to the top of a page.

Anchor links - Single

The "single" anchor link is used for the action of scrolling to the top or bottom. The most common use case is "Back to top."

There is also the option to scroll to the bottom for scenarios where users need to “Go to the bottom.”

The wording of the single component can be edited.

For consistency across the organization's websites:

  • Use "Back to top" when scrolling to the top.
  • Use "Go to the bottom" when scrolling to the bottom.

Anchor links - Double

The "double" anchor link is used to jump from one section to another: Previous or Next section.

The "Back to top" link can be added at the end of the section.

The wording of the double component cannot be edited.

The double anchor link behaviour is only to travel between sections.

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files

Functional grouping: Text and data

Demo

Primary action

Usage best practices

Anchor links - Single

Back to top (Up arrow)

Place to the left of the page. On the right side of the page are floating components which can interfere with the functionality of driving the user to the top of the page.

Anchor links - Single

Go to bottom (Down arrow)

Place to the right of the page. The main content is on the left, so placing it on the right won’t compete with the main information.

Anchor links - Double

Next section / Previous section

Place the double anchor link to the right of the page before the section title. Users will decide after learning which section of the page they are in if the action is to see the next section or return to a previous section.

The wording of this component cannot be edited, being the only action jumping between sections.

For the first section, only place “Next section.”

Place both “Next” and “Previous " in between sections.”

For the last section, only place “Previous section.”

“Back to top” is recommended at the end of the sections.

Do

  • Use a "Back to Top" button for pages longer than four screens. For relatively short pages, "Back to Top" links are unnecessary — users can simply scroll back without excessive effort. Avoid cluttering the interface if users can quickly navigate to the top using the scrollbar or their finger.
  • Place a persistent "Back to Top" button on the lower right side of the page. This is where users expect to see it. This position is out of the way but noticeable. When the button is placed elsewhere on the screen, it is often ignored.
  • Label the button "Back to Top." This phrase is the most descriptive. An icon only (e.g., an arrow pointing up) can be ambiguous and, depending on the graphical realization, may not convey the right meaning.
  • Use the "Next/Previous Section" button on top of the section title to ensure correct stacking on mobile devices.

Don't

  • Don't use "Back to Top" next to each section if the section is using the "Next/Previous Section" links. Avoid cluttering the interface.
  • Single anchor link: Change the wording only when necessary. Don't change just for the sake of change. For example, avoid using variations like "Top" or "Go to top." Stick with "Back to Top."