Date de publication: le lundi 25 février 2008 à 03h52
Dernière modification: par Pascal BOYER le lundi 25 février 2008 à 04h40
« Article précédent: JavaScript : lien "Imprimer cet article"
Le javascript présenté ci-dessous utilise la librairie smooth.js ou sa version compactée smooth.pack.js
L'objet de cette librairie est d'imprimer un mouvement décrescendo à la vitesse du mouvement de retour vers le haut de la page. Vous pouvez tester ce mouvement en cliquant sur la flèche située à droite de cet article.
Compatibilité
Fonctionne avec les navigateurs suivants:
- Firefox 2,
- Internet Explorer 6,
- Internet Explorer 7,
- Konqueror,
- Opéra.
Je n'ai pas eu le loisir de tester d'autres navigateurs.
Télécharger la librairie smooth.js
Vous trouverez la librairie smooth.js ou sa version compactée sur le site dezinerfolio.com
Installation
Une fois l'archive df_smooth_scroll.zip téléchargée, vous devez en extraire une des deux librairies.
Par soucis d'efficacité, nous placerons le version compactée ( smooth.pack.js) dans le sous-répertoire javascript d'un design du site.
Une commande pourrait être (après avoir dézipé l'archive):
cp smooth.pack.js /usr/local/www/design/plain_site/javascript/
Si vous utilisez la méthode d'appel automatique des javascript, c'est à dire si vous trouvez des lignes similaires dans l'en-tête de vos templates pagelayout.tpl :
{section name=JavaScript loop=ezini( 'JavaScriptSettings', 'JavaScriptList', 'design.ini' ) } <script language="JavaScript" type="text/javascript" src={concat( 'javascript/',$:item )|ezdesign}></script> {/section}
alors, vous devez à présent ajouter une ligne au fichier de surcharge design.ini.append.php de votre siteaccess:
[JavaScriptSettings] # Liste des fichiers JavaScript à inclure dans pagelayout JavaScriptList[]=smooth.pack.js
Pensez ensuite à vider les caches (effacez au minimum tout le contenu du répertoire var/plain_site/cache/template/compiled/) pour que le nouveau javascript soit chargé.
Si vous préférez ne pas utiliser cette méthode, ajoutez donc simplement cette ligne dans l'en-tête de votre fichier pagelayout.tpl:
{literal} <script language="JavaScript" type="text/javascript" src="/design/plain_site/javascript/mootools.js"></script> {/literal}
Cette deuxième méthode vous dispense de vider les caches.
Le code HTML
Puisque la librairie smooth.pack.js affectera désormais le comportement de toutes les ancres du site, vous devez donc en créer une au tout début du corps des pages HTML:
<body> <a name="top"></a>
Ensuite, vous créez, selon votre bon vouloir, un lien vers cette ancre.
Si vous utilisez une image (une flèche gif par exemple), voici à quoi doit ressembler ce lien à placer, bien sûr, quelque part dans le corps de vos pages HTML.:
<a id="hautdepage" href="#top" title="Retour vers le haut du document">
<img src={"images/fleche.gif"|ezdesign} alt="Lien vers le haut de la page" />
</a>
Il ne vous reste plus qu'à créer, éventuellement, les règles CSS permettant de positionner le lien:
#hautdepage { /* fleche de retour vers le haut */ bottom: 40%; /* Position de la fleche */ right: 6px; /* Position de la fleche */ width: 68px; /* Taille de la fleche */ height: 69px; /* Taille de la fleche */ } body > #hautdepage { /* fleche de retour vers le haut */ position: fixed; /* Position de la fleche */ }
Sans javascript
Pour mémoire, voici comment ne pas utiliser de javascript pour réaliser un lien Retour vers le haut de page.
Placer le code HTML suivant dans le fichier pagelayout.tpl:
<body id="top">
<a id="hautdepage" href="#top" title="Retour haut du document">
<img src={"/images/fleche_4.png"|ezdesign} alt="Lien vers le haut de la page" />
</a>
Les règles CSS:
#hautdepage { /* fleche de retour vers le haut */ bottom: 40%; /* Position de la fleche */ right: 6px; /* Position de la fleche */ width: 68px; /* Taille de la fleche */ height: 69px; /* Taille de la fleche */ } body > #hautdepage { /* fleche de retour vers le haut */ position: fixed; /* Position de la fleche */ }
Commentaires