Haut de page en pur JS (back to top)-Blog développement et graphisme-Guillaume Duverger

L'objectif de cette démonstration est de présenter un effet très connu en JavaScript. Descendez la page et vous verrez apparaître le bouton haut de page en bas à droite.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu purus libero. Vestibulum magna purus, maximus in congue at, condimentum non tortor. Donec ac ultrices nibh, eget ultrices mi. Nulla facilisi. Aliquam massa mauris, molestie sit amet consequat id, tempor quis diam. Pellentesque ut sollicitudin dui. Ut porta aliquet ipsum quis eleifend. Nunc at leo ante. Etiam risus erat, blandit eu velit eu, suscipit pulvinar erat. Quisque et mauris accumsan, ullamcorper felis quis, aliquet erat. Maecenas hendrerit diam posuere consectetur faucibus. Nam vehicula malesuada augue sed tincidunt. Integer ultrices risus laoreet, facilisis quam at, facilisis nisi. Nulla pellentesque metus mauris, nec finibus justo mollis nec. In euismod eleifend leo, eget maximus sem. Vivamus id malesuada ligula. Nullam luctus egestas magna eget condimentum. Fusce in mi eget sem consequat elementum. Phasellus aliquam lectus non tristique tincidunt.



<button type="button" class="haut-page-demo"><span>Haut de page</span></button>





@media (prefers-reduced-motion: no-preference) {
	
html{scroll-behavior: smooth}
	
.haut-page-demo{

transition: all .6s linear;

}
	
	}


.haut-page-demo{

border: unset;
cursor: pointer;	
color: #241d53;
position: fixed;
bottom: 3rem;
right: 3rem;
display: grid;
visibility: hidden;
height: 4rem;
aspect-ratio: 1;
background-color: #6753ea;
border-radius: .5rem;

	}
	
.haut-page-demo::before{
	
border-top: solid .25em;
border-right: solid .25em;
content:'';
width: 1rem;
aspect-ratio: 1;
margin: auto;
rotate: -45deg;
	
	}

.haut-page-demo span{

clip-path: inset(50%);
height: 1px;
width: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;

}




document.addEventListener("scroll", posAccroche);

let boutonHaut = document.querySelector(".haut-page-demo");

function posAccroche() {
  let hauteurDefilement = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  let nombrePos = 0.5;

  if ((document.documentElement.scrollTop / hauteurDefilement ) > nombrePos) {
 
    boutonHaut.style.cssText = `
     opacity:1;
     visibility:visible
   `;
  } 
	else {
  
    boutonHaut.style.cssText = `
     opacity:0;
     visibility:hidden
   `;
  }
}

boutonHaut.addEventListener("click", HautPage);

function HautPage() {
  window.scrollTo({
    top: 0
  });
}