Page d’accueil Ontario.ca
English

Système de conception pour l'Ontario

Haut de page

Utilisez un bouton Haut de page pour aider les utilisateurs à naviguer rapidement vers le haut d’une page qui est longue.

  • Contenu: 
    @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
  • Chemin du système de fichiers: fractal/components/components/navigation/back-to-top/back-to-top.scss
  • Taille: 5.1 KB
  • Contenu: 
    .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
  • Chemin du système de fichiers: fractal/components/components/navigation/back-to-top/back-to-top.css
  • Taille: 1.7 KB

Principe directeur: Faire preuve de cohérence.

Quand utiliser cette composante

Le bouton Haut de page est un raccourci qui permet aux utilisateurs de naviguer rapidement vers le haut d’une page qui est longue.

Les boutons Haut de page sont utilisés lorsqu’il est nécessaire de retourner au haut de la page pour :

  • voir le menu de navigation et choisir une nouvelle destination
  • accéder aux fonctions de filtre et de tri
  • entrer ou modifier une requête dans la boîte de recherche

Notre code précise que le bouton Haut de page apparaît lorsque l’utilisateur aura défilé sur 200 pixels vers le bas de la page.

À faire :

  • utiliser un seul bouton Haut de page par page
  • placer le bouton Haut de page dans le coin inférieur droit de la page et s’assurer qu’il est prudent
  • placer le bouton Haut de page au-dessus des autres boutons prudents (les boutons de clavardage et de sortie, par exemple)
  • inclure une microcopie, comme « Haut », à des fins descriptives dans l’affichage du bureau
  • envisager d’utiliser un effet de transition pour le mouvement vers le haut de la page pour aider les utilisateurs à s’orienter

À ne pas faire :

  • utiliser de multiples liens Haut de page dans toutes les sections de la page
  • permettre au bouton de bouger, car le mouvement déconcentrera l’utilisateur

Spécifications techniques

Couleur Largeur
Arrière-plan par défaut : #E6E6E6
Police : #1A1A1A
Arrière-plan de survol : #CCCCCC
Arrière-plan actif : #B2B2B2
Bordure active : #009ADB
Arrière-plan de focalisation : #E6E6E6
Bordure de focalisation : #009ADB		 Ordinateur de bureau : 97px
Tablette : 56px
Cellulaire : 48px

JavaScript

Exemple de code JavaScript pour cette fonction :

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' });
}

Veuillez noter qu’un émulateur de navigateur Web est requis pour que cette fonction fonctionne dans Safari. Nous avons utilisé cet émulateur de navigateur Web à défilement fluide (en anglais seulement).

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.