Back To Top
There are two types of back to top: global back to top and the content divider back to top ruler.
Global back to top
Global back to top sits within the closing <body> element of the page. Your page also needs to include the id of ua-top on the <html> element which the global back to top link points to within the DOM.
Global back to top requires a JavaScript plugin, to apply smooth scrolling, which is documented within the JavaScript section of the style guide.
JavaScript class: .js-smoothscroll
<p class="c-back-top-global js-back-top-global">
<a href="#ua-top" title="back to top" class="c-back-top-global__link c-btn c-btn--inverse js-smoothscroll">top</a>
</p>
Back to top ruler
Back to top ruler sits within the content section and anchors to the top of the website or a relevant parent container above e.g. when included in an A-Z list it should link to the top of the A-Z list. N.B. Depending on its use, you will need to alter the hidden text to say 'Go to top of page' or 'Go to top of list'.
Back to top ruler requires a JavaScript plugin, to apply smooth scrolling, which is documented within the JavaScript section of the style guide.
JavaScript class: .js-back-top-global and .js-smoothscroll
<div class="c-back-top-ruler">
<a class="c-back-top-ruler__link js-smoothscroll" href="#ua-top" title="Go to top of page">
<span class="u-hidden-text">Go to top of page</span>
<span class="c-back-top-ruler__text" aria-hidden="true">^</span>
</a>
<hr>
</div>