Back to top links

Back to top links can be enabled through theme settings and provide a way for visitors to easily return to the top of the page.

Every theme comes with at least two built-in back to top link styles that can be selected using theme settings: Standard and In footer. Both appear at the bottom of the page.

The Standard style appears in the bottom-left of the screen when it has been scrolled more than 250px:

Fixed back to top link
View code
<template id="tmpl-back-to-top-link">
  <button class="flex button button-outline button-sm bg-white p-3 m-4">
    <svg class="fill-current" width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" aria-hidden="true">
      <polygon points="12.4,40.1 25.8,53.6 40.5,38.8 40.5,97.5 59.5,97.5 59.5,38.8 74.2,53.6 87.6,40.1 50,2.5" />
    </svg>
  </button>
</template>

The In footer style appears in the top-right of the page footer:

Back to top link in footer
View code
<template id="tmpl-back-to-top-link">
  <div class="relative circle bg-primary -mt-4 mr-4 h-7 w-7 text-primary-inverse cursor-pointer hover:text-gray-300">
    <button class="not-a-button">
      <svg class="svg-icon fill-current absolute-center pointer-events-none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M24,0.229749535 C23.3,0.22 22.62,0.51 22.13,1 L0.68,22.45 L4.43,26.2 L21.35,9.28 L21.35,41.35 C21.35,42.64 21.34,43.71 21.34,44.38 L21.34,45.09 C21.35,46.78 22.7,47.79 24,47.79 C24.03,47.79 26.52,47.75 26.65,45.07 L26.65,44.98 C26.65,44.94 26.66,44.9 26.66,44.86 L26.66,9.28 L43.57,26.2 L47.32,22.45 L25.88,1 C25.38,0.5 24.7,0.229749535 24,0.229749535 Z" fill-rule="nonzero"></path>
      </svg>
    </button>
  </div>
</template>

Inline styles

You can also add inline back to top links that copied into a specific part of a page template.

Inline back to top link (on small screens
View code
<div class="container my-6">
  <a class="flex align-items-center my-4 py-4 text-inherit bg-white border-top border-bottom hover:no-underline md:hidden" href="#page-container">
    <svg class="mr-2 fill-current" height="24" width="24" viewBox="50 0 600 600" xmlns="http://www.w3.org/2000/svg">
      <path d="m497.19 337.75-32.996 32.996-92.16-92.16 0.003906 211.42h-46.668v-211.42l-92.16 92.16-32.996-32.996 148.49-148.49zm39.477-243.12h-373.34v46.668h373.33z"/>
    </svg> Back to top
  </a>
</div>

Back to top links exist within the page footer (footer.hbs) and, when enabled, appear on all pages. A back to top link can be added to the help center by selecting a style from the using the Back to Top link style theme setting in the General page elements setting group.

To replace one of the built-in styles, copy-and-paste just the template code of your chosen pattern into the bottom of the footer.hbs template.

<template id="tmpl-back-to-top-link">
  ...
</template>

The Standard style of back to top link is configured to appear once the page has scrolled more than 250px. You can change that threshold by updating the data-threshold attribute of the back to top link element in the footer.hbs template:

<div data-element="back-to-top" data-template="back-to-top-link" data-threshold="250px"></div>

To an an inline style to a page, simply copy the pattern code into the page template where you’d like it to appear.

Related patterns

Breadcrumbs

Breadcrumbs

6 patterns

Pagination

Pagination

2 patterns