Back to Top

Use a Back to Top button to help users quickly navigate to the top of a long page.

  • Content:
    @import "../../../../theme/assets/styles/sass/variables-import";
    @import "../../../../theme/assets/styles/sass/tools/focus.placeholder";
    @import "../../../../theme/assets/styles/sass/variables/global.variables.scss";
    
    // Colour variables
    $ontario-colour-back-to-top--default-background: #e6e6e6;
    $ontario-colour-back-to-top--active-background: #b2b2b2;
    
    $default-padding-top: rem-calc(8);
    $default-padding-right: rem-calc(16);
    $default-padding-bottom: rem-calc(8);
    $default-padding-left: rem-calc(12);
    
    $default-icon-margin-top: rem-calc(1);
    $default-icon-margin-right: rem-calc(8);
    $default-icon-margin-bottom: rem-calc(1);
    $default-icon-margin-left: 0;
    
    $tablet-padding-top: rem-calc(6);
    $tablet-padding-right: rem-calc(12);
    $tablet-padding-bottom: rem-calc(9);
    $tablet-padding-left: rem-calc(12);
    
    $tablet-icon-margin-top: rem-calc(1);
    $tablet-icon-margin-right: 0;
    $tablet-icon-margin-bottom: rem-calc(4);
    $tablet-icon-margin-left: 0;
    
    $mobile-padding: rem-calc(8);
    $mobile-icon-margin: 0;
    
    .ontario-back-to-top--default {
        position: fixed;
        bottom: 5%;
        right: 2%;
        visibility: hidden;
        opacity: 0;
        transition: 0.1s ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center;
        height: rem-calc(48);
        padding: $default-padding-top $default-padding-right $default-padding-bottom $default-padding-left;
        background: $ontario-colour-back-to-top--default-background;
        border: rem-calc(2) solid $ontario-colour-white;
        border-radius: $global-radius;
        box-sizing: border-box;
        box-shadow: 0 rem-calc(2) rem-calc(4) rgba(0, 0, 0, 0.6);
        color: $ontario-colour-black;
        line-height: rem-calc(20);
        font-size: 1rem;
        font-family: $ontario-font-open-sans;
        font-weight: $ontario-font-weight-semi-bold;
        z-index: 10000;
        cursor: pointer;
    
        svg.ontario-icon {
            margin: 0.125rem $spacing-2 0 0;
            width: rem-calc(32);
            height: rem-calc(32);
        }
    
        &:hover {
            background-color: $ontario-greyscale-20;
        }
    
        &:focus {
            background-color: $ontario-colour-back-to-top--default-background;
            box-shadow: 0 0 0 rem-calc(4) $ontario-colour-focus,
                0 rem-calc(3) rem-calc(5) rem-calc(3) rgba(0, 0, 0, 0.6);
            outline: rem-calc(4) solid transparent;
            transition: 0.1s ease-in-out;
        }
    
        &:active {
            background-color: $ontario-colour-back-to-top--active-background;
            box-shadow: 0 0 0 rem-calc(4) $ontario-colour-focus,
                0 rem-calc(5) rem-calc(7) rem-calc(3) rgba(0, 0, 0, 0.6);
            outline: rem-calc(4) solid transparent;
            transition: background-color 0s, $ontario-focus-transition;
        }
    
        &:visited {
            color: $ontario-colour-white;
        }
    
        @media screen and (max-width: $medium-breakpoint) {
            flex-direction: column;
            height: rem-calc(76);
            padding: $tablet-padding-top $tablet-padding-right $tablet-padding-bottom $tablet-padding-left;
            svg.ontario-icon {
                margin: $tablet-icon-margin-top $tablet-icon-margin-right $tablet-icon-margin-bottom $tablet-icon-margin-left;
                width: rem-calc(32);
                height: rem-calc(32);
            }
        }
    
        @media screen and (max-width: $small-breakpoint) {
            display: block;
            padding: $mobile-padding;
            font-size: 0;
            width: rem-calc(48);
            height: rem-calc(48);
            svg.ontario-icon {
                margin: $mobile-icon-margin;
            }
        }
    }
    
    .active {
        visibility: visible;
        opacity: 1;
    }
    
  • URL: /components/raw/back-to-top/back-to-top.scss
  • Filesystem Path: fractal/components/components/navigation/back-to-top/back-to-top.scss
  • Size: 3.5 KB
  • Content:
    .ontario-back-to-top--default{position:fixed;bottom:5%;right:2%;visibility:hidden;opacity:0;transition:.1s ease-in-out;display:flex;justify-content:center;align-items:center;height:3rem;padding:.5rem 1rem .5rem .75rem;background:#e6e6e6;border:.125rem solid #fff;border-radius:4px;box-sizing:border-box;box-shadow:0 .125rem .25rem rgba(0,0,0,.6);color:#1a1a1a;line-height:1.25rem;font-size:1rem;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:600;z-index:10000;cursor:pointer}.ontario-back-to-top--default svg.ontario-icon{margin:.125rem .5rem 0 0;width:2rem;height:2rem}.ontario-back-to-top--default:hover{background-color:#ccc}.ontario-back-to-top--default:focus{background-color:#e6e6e6;box-shadow:0 0 0 .25rem #009adb,0 .1875rem .3125rem .1875rem rgba(0,0,0,.6);outline:.25rem solid transparent;transition:.1s ease-in-out}.ontario-back-to-top--default:active{background-color:#b2b2b2;box-shadow:0 0 0 .25rem #009adb,0 .3125rem .4375rem .1875rem rgba(0,0,0,.6);outline:.25rem solid transparent;transition:background-color 0s,box-shadow .1s ease-in-out}.ontario-back-to-top--default:visited{color:#fff}@media screen and (max-width: 73em){.ontario-back-to-top--default{flex-direction:column;height:4.75rem;padding:.375rem .75rem .5625rem .75rem}.ontario-back-to-top--default svg.ontario-icon{margin:.0625rem 0 .25rem 0;width:2rem;height:2rem}}@media screen and (max-width: 40em){.ontario-back-to-top--default{display:block;padding:.5rem;font-size:0;width:3rem;height:3rem}.ontario-back-to-top--default svg.ontario-icon{margin:0}}.active{visibility:visible;opacity:1}
  • URL: /components/raw/back-to-top/back-to-top.css
  • Filesystem Path: fractal/components/components/navigation/back-to-top/back-to-top.css
  • Size: 1.6 KB

Guiding principle: Be consistent.

When to use this component

The Back to Top button is a shortcut that allows users to quickly navigate to the top of a long page.

Back-to-top buttons are used when there is a need to get back to the top of the page to:

  • see the navigation menu and choose a new destination
  • access filtering and sorting features
  • enter or edit a query in the search box

Our code specifies that the Back to Top button appears once the user has scrolled 200 pixels down the page.


Do:

  • use only one Back to Top button per page
  • place the Back to Top button in the lower-right corner of the page and ensure it is sticky
  • place the Back to Top button above other sticky buttons (for example, chat or exit buttons)
  • include microcopy, such as “Top”, to be more descriptive on desktop view
  • consider using a transition effect for the movement to the top of the page to help users orient themselves

Don’t:

  • use multiple back-to-top links in every section of the page
  • allow the button to move, as movement will distract the user

Technical specifications

Colour Width
Default background: #E6E6E6
Font: #1A1A1A
Hover background: #CCCCCC
Active background: #B2B2B2
Active border: #009ADB
Focus background: #E6E6E6
Focus border: #009ADB
Desktop: 97px
Tablet: 56px
Mobile: 48px

JavaScript

Example JavaScript code for the functionality:

window.addEventListener("scroll", function () {
    let scroll = document.getElementById("btt-button");
    scroll.classList.toggle("active", window.scrollY > 200);
});

function scrollToTop() {
    window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
}

Note that a polyfill is required for this to work in Safari. We have used this smooth scroll behaviour polyfill.


Contact us

If you have any questions or feedback, please get in touch.