Méthode avec la propriété sticky et les masques CSS pour l'effet de fondu sur le bouton retour :
<body>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate dictum ex dictum hendrerit. Ut dapibus placerat vehicula. Mauris quis ligula fringilla, suscipit metus eget, egestas sem. Nulla mauris felis, pharetra sed lectus in, maximus sagittis diam. Etiam ligula ex, rhoncus semper finibus vel, congue a velit. Donec eu eros porta, porta purus a, sodales erat. Nulla ut dolor eu est porta condimentum. Duis sit amet ligula sagittis, ultricies ligula eu, rhoncus ante.</p>
<p>Sed a metus a nulla ornare ullamcorper quis id ipsum. Sed dui sem, euismod nec ante vel, scelerisque hendrerit lorem. Nam vitae semper dolor. In condimentum, lectus eu aliquet sollicitudin, erat urna feugiat felis, quis fringilla neque erat ut neque. Aenean commodo risus ut diam tempor, eget efficitur ante tincidunt. Duis tincidunt velit pellentesque eros suscipit, vel pretium urna efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam tincidunt mattis feugiat. Proin iaculis non nisi eget faucibus. Proin tristique vitae nulla ut finibus. Aliquam congue posuere tincidunt. Morbi elementum, odio at condimentum mollis, nulla nibh laoreet massa, eu vulputate metus lacus sit amet eros. Etiam lacinia lacus quis enim dapibus maximus. Maecenas ut aliquet nisi, interdum pulvinar augue. Nulla rutrum nibh et nulla varius dapibus.</p>
<p>Mauris cursus sem ut mi pharetra placerat. In auctor lorem a vehicula faucibus. Sed id pulvinar odio. Morbi eget sodales mauris. Nulla facilisi. Pellentesque vitae magna tempus, laoreet lorem vitae, fermentum nulla. Pellentesque finibus luctus suscipit. Nullam suscipit tellus non lacus interdum luctus. Fusce ut leo id enim maximus imperdiet. Nunc ante tortor, interdum non tempus ut, vestibulum ut magna. Curabitur dui leo, commodo non dui vel, viverra suscipit nunc. Aliquam erat volutpat. Quisque non faucibus mi. Curabitur nec elit sed massa mollis scelerisque. Suspendisse ultricies enim id congue aliquet. </p>
<p>Quisque turpis leo, scelerisque ut semper sed, venenatis id purus. Duis ac tellus rhoncus, pretium enim non, porttitor tortor. Nulla facilisi. Nam venenatis orci nisi. Aenean eget sapien ac orci malesuada commodo ac et sem. Nulla molestie lacus sit amet sapien iaculis, quis facilisis nulla ultricies. Vivamus quis tellus at leo tincidunt posuere sed eget mi. Etiam quis nisi vitae elit sodales tempor. Sed blandit sagittis dolor ut cursus. Pellentesque malesuada nulla vel vulputate tempor.</p>
<div class="haut-page">
<a href="#" class="haut"></a>
</div></a>
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
scroll-behavior: smooth;
}
body {
display: grid;
grid-template-columns: auto 0px;
margin:0;
font-family:system-ui
}
main{
max-width: 75ch;
margin: auto;
padding: 1rem
}
.haut-page {
outline:1px solid transparent;/*fix bug firefox*/
--offset: 100px;
--fade: 80px;
display: flex;
align-items: flex-end;
width: 60px;
justify-self: end;
-webkit-mask: linear-gradient(transparent calc(100vh + var(--offset)),#000 calc(100vh + var(--offset) + var(--fade)));
mask: linear-gradient(transparent calc(100vh + var(--offset)),#000 calc(100vh + var(--offset) + var(--fade)));
}
.haut {
position: sticky;
bottom: 1.25rem;
width: inherit;
aspect-ratio: 1;
background-color: #6753ea;
border-radius: .875rem;
}
.haut::before {
border-style: solid;
border-color: white;
border-width: 0.25em 0.25em 0 0;
content: '';
width: 1em;
height: 1em;
position: absolute;
top:0;
left:0;
bottom:0;
right:0;
/*inset:0*/
margin:auto;
transform: rotate(-45deg);
}
p {
font-size: 1.25rem;
line-height:2
}