Blog

DémonstrationTélécharger (Github)

Si vous avez dans votre site des pages un peu longues, qui vont amener vos utilisateurs à faire défiler la fenêtre (scroller) pour découvrir votre contenu, ils n'auront peut être pas la patience d'en faire autant pour remonter en haut de page. Voici donc un petit plugin jQuery handmade by NOE qui leur permettra de remonter en un clic avec une petite animation. Nous allons voir comment le faire fonctionner, et discuterons les différentes options à votre disposition.

Principe

Le but de ce plugin est d'ajouter un lien à un élément de la page, par exemple le body ou un élément plus spécifique si on veut. Une fois que l'utilisateur a commencé à parcourir une certaine distance vers le bas de la page, il pourra donc à tout moment cliquer sur ce lien pour être ré-acheminé en haut de l'élément choisi.

Installation

Étape 1 : Inclure le plugin

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1"></script><!-- jQuery --><script type="text/javascript" src="CHEMIN_VERS/scrollToTop/scrollToTop.js"></script><!-- The plugin file -->

Afin d'utiliser le plugin, vous aurez tout d'abord besoin d'inclure la librairie jQuery, puis le script du plugin. Étant donné que ce script est plutôt petit, vous préférerez peut-être copier coller le code dans un de vos fichiers JavaScript existant. Cela vous évitera une requête http, sinon il vous suffit d'inclure les fichiers comme suit:

Étape 2 : Instanciation

Pour instancier le plugin, il vous suffit de le connecter à un élément dans une balise script, ou dans un fichier js à part comme démontré:

jQuery(document).ready(function($){
//Back to top plugin instanciation
$('body').backtotop();
});

Pour personnaliser le fonctionnement du plugin, vous pouvez spécifier différentes options.

Options

bckTopLinkClass'backTopLink' (string css class name)Classe css que l'on peut appliquer au lien

Par exemple, pour modifier la vitesse de défilement, la distance à parcourir avant l'apparition ainsi que le texte du lien, l'instanciation se ferait de la manière suivante:

jQuery(document).ready(function($){
//Back to top plugin instanciation
$('#content').backtotop({
topOffset: 500,
speed: 2000,
bckTopLinkTitle: 'Retour en haut de page'
});
});

Comme expliqué au début, le plugin ajoute un lien de retour vers le haut à l’élément choisi. Il sera sûrement nécessaire d'appliquer un peu de style sur cet élément pour le rendre bien visible pour l'utilisateur. Voici quelques règles css que vous pouvez utiliser par défaut :

.backtotopinstance{
position: fixed;
right: 50px;
bottom: 50px;
background: #eee;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 3px 3px 3px 3px;
padding: 15px 25px;
}

Ce style va fixer le bouton 50px en bas à droite de l'élément cible, ainsi qu'un background, une border et un peu de padding. Libre à vous d'imaginer ce que vous voulez.

Voilà pour la présentation de ce petit plugin tout simple et vraiment rapide à déployer. Alors pensez à vos utilisateurs et facilitez-leur la tâche!