Back to top

Skip to main guidance


        
        <button onClick='scrollToTop()' id='actual-btt-button' class='ontario-back-to-top--default'>
    <svg class="ontario-icon" alt="" aria-hidden="true" focusable="false" sol:category="primary" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet">
        <use href="#ontario-icon-arrow-up"></use>
    </svg>
    Top
</button>

<script src='../../scripts/back-to-top.js'></script>

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/fonts.variables' as fonts;
@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: fonts.$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 hsla(0,0%,10%,.6);color:hsl(0,0%,10%);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 rgba(0,0,0,0);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 rgba(0,0,0,0);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

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.

Best practices

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

Do not:

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

Developer implementation

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.

Web component documentation

The Ontario Design System Web component developer documentation site provides guidance, examples, and API documentation for web components and component library packages, including Angular and React/Next.js implementations.

Refer to the back to top documentation for guidance on using the web component.

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