Vous êtes ici: Accueil / Informatique / Site Web / JavaScript / Scroll Haut de page

Scroll Haut de Page

 

Explication

Ce petit développement JavaScript vous permet de faire un retour en haut de la page avec un effet ralenti en fin de parcours. Comme vous l'avez peut-être déjà remarqué, c'est ce programme que nous utilisons quand vous cliquer sur

Code JavaScript

var delai=0; var pix=0; var pixmax=0; var inc=0;

function MomNavigateur() {
  if (navigator.appName=="Microsoft Internet Explorer") {
	pixscroll = document.documentElement.scrollTop;
  }
  else {
	pixscroll = window.pageYOffset;
  }	
}

function ScrollUpToPage() {
	delai=1;
	inc=-20;
	MomNavigateur()
	pix = pixscroll;
	if (-inc > pixscroll) {
		if (pixscroll > 15) {inc = -pixmax+15;};
	}
	if (pixscroll > 15) {self.scrollTo(0,15);pixscroll=15;pix=15;inc=-5;}
	setTimeout("scroll()",delai);
}

function scroll() {
	pix=pix+inc;
	self.scrollBy(0,inc);
	if (pix >= 0) {
		setTimeout("scroll()",delai);
		MomNavigateur();
		if (pixscroll <= 5) {inc=-1;}
		if (pixscroll > 5) {if (pixscroll <= 10) {inc=-3;};}
		if (pix < pixscroll) {pix=0;};
	}
}

 

Mise en place

Selectionner les fonctions javascript et placer le code entre < head > et </ head >.

Au niveau de votre lien, appeler la fonction ScrollUpToPage()

Exemple

<a href="javascript:;" onClick="ScrollUpToPage()";>
<img src="AM_Novice/FlecheH.jpg" alt="Haut" width="25" height="25" border="0" 
title="Haut de page"/>
</a>