Back to Top Links

Use the Back to Top component on long pages to make it easier for users to return to your main in-page navigation.

This component has a UO Edit Suite template for easy use on Drupal Sites: How to use this template

Examples and Code

Select example

<div id="main-content">
  <h2>Key Audiences</h2>
  <p>It is important that communications are appropriate, applicable, and delivered in timely ways that are meaningful
    for each key audience.</p>
  <h3 class="mt4">Students:</h3>
  <p>Students seek timely information on class schedules, campus activities, and resources that enhance their academic
    and personal experiences. They are interested in messages related to internship and career opportunities, student
    organizations, health and wellness initiatives, identity and belonging, and content that contributes to their
    growth.</p>
  <p class="back-to-top"><a class="back-to-top__link" href="#main-content">Back to Top</a></p>
  <h3 class="mt4">Faculty and Staff:</h3>
  <p>Faculty and staff value clear communication about administrative updates, academic opportunities, and institutional
    policies. They appreciate messages that highlight professional development opportunities, research achievements, and
    campus events that foster a sense of community and collaboration.</p>
  <p class="back-to-top"><a class="back-to-top__link" href="#main-content">Back to Top</a></p>
  <h3 class="mt4">Alumni:</h3>
  <p>Alumni are invested in the university's achievements and impact. They value updates on academic excellence,
    philanthropic endeavors, and opportunities to stay connected, such as alumni events and networking platforms that
    help them maintain their ties to the university community and a sense of connection and nostalgia.</p>
  <p class="back-to-top"><a class="back-to-top__link" href="#main-content">Back to Top</a></p>
</div>

Usage

Add the element with the standard provided classnames, link, and text to the page. If your application uses a different ID than #main-content for the page top, update the link href to match this ID.

Guidance

When to Use Back to Top Links

On Long Pages: Use to provide an easy way to return to in-page navigation on long pages.

Usage Guidance

Provide a table of contents with in-page anchor links for long pages: In-page anchor links at the top to key headings allows users to easily navigate the content, and return to the top with navigation using back-to-top links.

Elements

Element	Description	Usage	Required	Multiple
Link	The link to the top of the page	Keep the link and link text consistent across your site	Yes	No