Créer un site internet

Défilement haut et bas de page

Faire défiler la page vers le haut ou le bas avec arrêt

 

Vous connaissez certainement la commande "haut de page" qui permet en cliquant sur un lien en bas de page de remonter directement en haut de page,
elle se présente sous cette forme "<a href="#">Haut de page</a>".
Je vous propose de remplacer ce simple lien par deux flèches (haut et bas) personnalisables qui au passage de la souris sur l'une d'entre elle, remonte ou descend sur la page et s'arrête si on déplace la souris, il y a aussi la possibilité de cliquer pour monter ou descendre directement.


Test

     

 


Personnaliser les flèches (facultatif)


     

Le script

Vous devez insérer la totalité du script en zone éditable :
"Scripts javascripts supplémentaires"

document.write(unescape('%3Cdiv id="hp" style="position:fixed; z-index:200; bottom:0%; right:0%;"%3E%3Ca href="javascript:;" onmouseover="defilPage(\'haut\');" onmouseout="defilPage(\'arret\')" onclick="defilPage(\'directHaut\');"%3E%3Cimg src="http://scriptsdegiga24bis.e-monsite.com/medias/images/fleche-haut-1.png" width="25px" height="25px" border="0" hspace="0" vspace="0" alt="Haut" /%3E%3C/a%3E%3Cbr /%3E%3Ca href="javascript:;" onmouseover="defilPage(\'bas\');" onmouseout="defilPage(\'arret\')" onclick="defilPage(\'directBas\');"%3E%3Cimg src="http://scriptsdegiga24bis.e-monsite.com/medias/images/fleche-bas-1.png" width="25px" height="25px" border="0" hspace="0" vspace="0"  alt="Bas" /%3E%3C/a%3E%3C/div%3E'));
var defil; var scrl;
function defilPage(option) {
if (navigator.appName == "Microsoft Internet Explorer"){ 
var scroll = document.documentElement.scrollTop;
var hght = document.documentElement.clientHeight;
} 
else { 
var scroll = window.pageYOffset;
var hght = window.innerHeight;
}
if (option == "haut") { scrl = -50; var defil = setInterval('defilPage()', 250); }
if (option == "bas") { scrl = 50; var defil = setInterval('defilPage()', 250); }
if (option == "arret") { scrl = 0; clearInterval(defil); }
if (option == "directHaut") { for (var i=0 ;i < scroll ; i++){ scrollBy(0,-50); }}
if (option == "directBas") { 
var scrollBas = document.body.offsetHeight - hght; 
for (var i = 0; i < scrollBas; i++){ scrollBy(0, 50); }}
if (scrl != 0) {scrollBy(0, scrl);}}


Testez sur votre site !

  

 

2 votes. Moyenne 4.50 sur 5.

Ajouter un commentaire

 
×