Ontario.ca homepage
Français

Ontario Design System

Back to Top

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

  • Content: 
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;
@use '@ontario-digital-service/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.1 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.