Back to Top

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

  • Content:
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
    
    $ontario-focus-transition: box-shadow 0.1s ease-in-out;
    
    // Colour variables
    $ontario-colour-back-to-top--default-background: #e6e6e6;
    $ontario-colour-back-to-top--active-background: #b2b2b2;
    
    $default-padding-top: globalFunctions.px-to-rem(8);
    $default-padding-right: globalFunctions.px-to-rem(16);
    $default-padding-bottom: globalFunctions.px-to-rem(8);
    $default-padding-left: globalFunctions.px-to-rem(12);
    
    $default-icon-margin-top: globalFunctions.px-to-rem(1);
    $default-icon-margin-right: globalFunctions.px-to-rem(8);
    $default-icon-margin-bottom: globalFunctions.px-to-rem(1);
    $default-icon-margin-left: spacing.$spacing-0;
    
    $tablet-padding-top: globalFunctions.px-to-rem(6);
    $tablet-padding-right: globalFunctions.px-to-rem(12);
    $tablet-padding-bottom: globalFunctions.px-to-rem(9);
    $tablet-padding-left: globalFunctions.px-to-rem(12);
    
    $tablet-icon-margin-top: globalFunctions.px-to-rem(1);
    $tablet-icon-margin-right: spacing.$spacing-0;
    $tablet-icon-margin-bottom: globalFunctions.px-to-rem(4);
    $tablet-icon-margin-left: spacing.$spacing-0;
    
    $mobile-padding: globalFunctions.px-to-rem(8);
    $mobile-icon-margin: spacing.$spacing-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: globalFunctions.px-to-rem(48);
    	padding: $default-padding-top $default-padding-right $default-padding-bottom $default-padding-left;
    	background: $ontario-colour-back-to-top--default-background;
    	border: globalFunctions.px-to-rem(2) solid colours.$ontario-colour-white;
    	border-radius: globalVariables.$global-radius;
    	box-sizing: border-box;
    	box-shadow: 0 globalFunctions.px-to-rem(2) globalFunctions.px-to-rem(4) rgba(colours.$ontario-colour-black, 0.6);
    	color: colours.$ontario-colour-black;
    	line-height: globalFunctions.px-to-rem(20);
    	font-size: fontSizes.$ontario-font-size-standard-body-text;
    	font-family: typography.$ontario-font-open-sans;
    	font-weight: fontWeights.$ontario-font-weights-semi-bold;
    	z-index: 10000;
    	cursor: pointer;
    
    	svg.ontario-icon {
    		margin: 0.125rem spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-0;
    		width: globalFunctions.px-to-rem(32);
    		height: globalFunctions.px-to-rem(32);
    	}
    
    	&:hover {
    		background-color: colours.$ontario-greyscale-20;
    	}
    
    	&:focus {
    		background-color: $ontario-colour-back-to-top--default-background;
    		box-shadow: 0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,
    			0 globalFunctions.px-to-rem(3) globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);
    		outline: globalFunctions.px-to-rem(4) solid transparent;
    		transition: 0.1s ease-in-out;
    	}
    
    	&:active {
    		background-color: $ontario-colour-back-to-top--active-background;
    		box-shadow: 0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,
    			0 globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(7) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);
    		outline: globalFunctions.px-to-rem(4) solid transparent;
    		transition: background-color 0s, $ontario-focus-transition;
    	}
    
    	&:visited {
    		color: colours.$ontario-colour-white;
    	}
    
    	@media screen and (max-width: breakpoints.$medium-breakpoint) {
    		flex-direction: column;
    		height: globalFunctions.px-to-rem(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: globalFunctions.px-to-rem(32);
    			height: globalFunctions.px-to-rem(32);
    		}
    	}
    
    	@media screen and (max-width: breakpoints.$small-breakpoint) {
    		display: block;
    		padding: $mobile-padding;
    		font-size: 0;
    		width: globalFunctions.px-to-rem(48);
    		height: globalFunctions.px-to-rem(48);
    		svg.ontario-icon {
    			margin: $mobile-icon-margin;
    			@-moz-document url-prefix() {
    				padding: 0 spacing.$spacing-1 spacing.$spacing-1 spacing.$spacing-0;
    			}
    		}
    	}
    }
    
    .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: 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(26,26,26,.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}@-moz-document url-prefix(){.ontario-back-to-top--default svg.ontario-icon{padding:0 .25rem .25rem 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.7 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.

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