container@containerscroll-state- haut page
Votre navigateur ne supporte pas cette démonstration
Descendez la page pour voir apparaître un bouton "haut de page" en bas à droite.
<body>
<header></header>
<main>
...
</main>
<div class="haut">
<button class="haut-page" aria-label="haut page" onclick="this.closest('html').scrollTo({top: 0, left: 0, behavior: 'smooth'})"></button>
</div>
*,
*::before,
*::after{
box-sizing: border-box
}
html{
container-type: scroll-state size;
overflow: auto;
}
body {
margin: 0;
position:relative;
}
.haut{
transition:opacity .25s .25s;
position:absolute;
top:100vh;
right:1rem;
bottom:0;
pointer-events:none;
@container not scroll-state(scrollable: top) {
opacity: 0;
}
}
.haut-page{
color: white;
position: sticky;
top: calc(100vh - 5rem);
display: grid;
width: 4rem;
aspect-ratio: 1;
background-color: black;
border-radius: .5lh;
}
.haut-page::before{
border-top: solid .125lh;
border-right: solid .125lh;
content: '';
width: 1rem;
aspect-ratio: inherit;
margin: auto;
rotate: -45deg;
}