Back to top link

How to use it

Use at the end of long pages or long sections, such as FAQs or changelogs, where scrolling back up takes several screens. Do not add it to short pages, and do not make it a floating button that covers content on small screens. Point the href at the id of your page's first heading (or your main element) and give that target tabindex="-1".

Accessibility

A plain <a href> pointing at the id of the page's top heading, so it works without JavaScript, is announced as a link with the visible text "Back to top", and stays in the normal Tab order. The target heading has tabindex="-1" so keyboard focus moves to the top too, instead of the next Tab press jumping back to the bottom. The arrow icon is decorative (aria-hidden). Link text is #1d4ed8 on #ffffff (6.70:1), #1e3a8a on #eff6ff while hovered (9.52:1); body text is #0f172a on #ffffff (17.85:1).

Source (copy-ready)

Copy code

<div class="dcl-back-to-top">
  <h2 class="dcl-back-to-top__title" id="dcl-back-to-top-start" tabindex="-1">Frequently asked questions</h2>
  <h3 class="dcl-back-to-top__q">Can I change my plan later?</h3>
  <p class="dcl-back-to-top__a">Yes. Changes take effect at the start of your next billing period.</p>
  <h3 class="dcl-back-to-top__q">Do you keep my files after I cancel?</h3>
  <p class="dcl-back-to-top__a">Files stay available to download for 30 days, then they are deleted.</p>
  <h3 class="dcl-back-to-top__q">How do I export my data?</h3>
  <p class="dcl-back-to-top__a">Open Settings, choose Export and pick a format. Large exports arrive by email.</p>
  <p class="dcl-back-to-top__footer">
    <a class="dcl-back-to-top__link" href="#dcl-back-to-top-start">
      <svg class="dcl-back-to-top__icon" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false"><path d="M8 13V3M3.5 7.5L8 3l4.5 4.5" stroke="#1d4ed8" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
      <span class="dcl-back-to-top__label">Back to top</span>
    </a>
  </p>
</div>
<style>
.dcl-back-to-top { max-width: 36rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-back-to-top__title { margin: 0 0 0.75rem; font-size: 1.25rem; color: #0f172a; background-color: #ffffff; }
.dcl-back-to-top__title:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-back-to-top__q { margin: 1rem 0 0.25rem; font-size: 1rem; color: #0f172a; background-color: #ffffff; }
.dcl-back-to-top__a { margin: 0; color: #0f172a; background-color: #ffffff; }
.dcl-back-to-top__footer { margin: 1.5rem 0 0; padding-top: 0.75rem; border-top: 1px solid #e2e8f0; text-align: right; color: #0f172a; background-color: #ffffff; }
.dcl-back-to-top__link { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.5rem; border-radius: 0.25rem; color: #1d4ed8; background-color: #ffffff; }
.dcl-back-to-top__link:hover { color: #1e3a8a; background-color: #eff6ff; }
.dcl-back-to-top__link:hover .dcl-back-to-top__label { color: #1e3a8a; background-color: #eff6ff; }
.dcl-back-to-top__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-back-to-top__label { color: #1d4ed8; background-color: #ffffff; }
.dcl-back-to-top__icon { flex: none; }
</style>