Accueil    Codes    Retour haut de page fluide
 



Retour haut de page fluide  Retour haut de page fluide




Présentation



Ce code javascript permet d'appliquer un effet fluide pour retourner en haut de page en se basant sur l'animation de l'évènement scroll avec jquery.

Il est possible de définir différents paramètres :
- startline : mesure du scroll vers le bas en pixel effectué par l'utilisateur avant d'afficher l'image du lien de retour vers le haut de la page
- controlHTML : le code html de l'image ou du contrôle qui sera affiché pour effectuer l'action de retour en haut de page
- controlattrs : positionnement du contrôle par rapport au coin bas doit de la fenêtre
- anchorkeyword : nom de l'ancre html qui provoquera la même animation si une référence y est faite


Implémentation




Il faut dans un premier temps intégrer le dossier contenant les éléments à intégrer dans l'exemple :
- les deux scripts jquery
- le script contenant le comportement et le paramétrage relatif à l'animation
- l'image affichée pour faire office de lien vers le haut

Ensuite dans la page de mise en place de l'animation il faut faire référence aux différents script dans la partie <head> du document :


<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.oembed.js"></script>
<script type="text/javascript" src="scrolltop.js"></script>


Si une image doit être utilisée pour être affichée, il faut paramétrer celle-ci dans le fichier javascript "scrolltop.js" (image, taille et opacité). Ce paramétrage se fait au niveau de la variable "controlHTML".
De même si une ancre doit être définie, le paramétrage se fait dans ce même fichier au niveau de la variable "anchorkeyword".


Exemple de paramétrage d'une image comme lien vers le retour en haut de page :

controlHTML: '<img src="nom-image.png" style="filter:alpha(opacity=70); -moz-opacity:0.7; width:40px; height:40px" />'

Définition d'une ancre html pour le retour haut de page :

anchorkeyword: '#top'

Un lien nommé <a href="#top">Retour en haut</a> provoquera quel que soit son emplacement dans la page l'animation de retour en haut de page


Voici un exemple de lien provoquant ce retour en haut de page :

retour en haut de page




TelechargementTélécharger l'exemple de retour fluide en haut de page