Ajouter un bouton de défilement vers le haut sur votre site peut être un excellent moyen pour permettre à vos utilisateurs de naviguer.
Un bouton de retour rapide doit être subtil, généralement il se trouve en bas et à droite de la page mais dans notre cas on va utiliser le positionnement fixe et on va montrer / cacher le bouton selon l’endroit où le scroll de l’utilisateur se trouve.
Dans cet article on va aborder la technique pour afficher le bouton lorsque l’utilisateur va scroller la page, puis la technique pour générer l’icône, tel que Font Awesome
Ajout des bibliothèques
Côté javascript, on aura besoin de jQuery pour pouvoir cacher / afficher le bouton et pour faire défiler la page. Il suffira de le déclarer dans le head de la page sauf si c’est déjà fait.
|
1 2 3 4 |
<!-- ... --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> </body> </html> |
L’étape suivante consiste à ajouter le font d’icône issue de Font Awesome qu’on va déclarer dans le head de notre page.
|
1 2 3 4 |
<head> <!-- ... --> <link rel="stylesheet" id="font-awesome-css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" type="text/css" media="screen"> </head> |
La structure HTML
La structure HTML à ajouter est très simple et peut être mis n’importe où dans le body.
|
1 2 3 4 5 |
<div class="scroll-top-wrapper "> <span class="scroll-top-inner"> <i class="fa fa-2x fa-arrow-circle-up"></i> </span> </div> |
Les styles CSS
Styliser le bouton est assez simple car il suffit de lui attribuer les couleurs, tailles que vous pouvez modifier selon votre besoin, mais les plus importants sont les positionnements, visibilité, et l’opacité.
Ajouter ce qui suit au fichier css de votre page :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
scroll-top-wrapper { position: fixed; opacity: 0; visibility: hidden; overflow: hidden; text-align: center; z-index: 99999999; background-color: #777777; color: #eeeeee; width: 50px; height: 48px; line-height: 48px; right: 30px; bottom: 30px; padding-top: 2px; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .scroll-top-wrapper:hover { background-color: #888888; } .scroll-top-wrapper.show { visibility:visible; cursor:pointer; opacity: 1.0; } .scroll-top-wrapper i.fa { <pre class="lang:default decode:true " > line-height: inherit;<script> $(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.scroll-top-wrapper').addClass('show'); } else { $('.scroll-top-wrapper').removeClass('show'); } }); }); </script> |
Le javascript
Il y aura deux événements qu’on va manipuler par jQuery.
Le premier va afficher ou cacher le bouton lorsque l’utilisateur scroll page. La seconde consiste à faire défiler la page lors l’utilisateur clic sur le bouton.
Afficher ou masquer le bouton
Pour afficher ou masquer le bouton nous allons utiliser l’événement ‘scroll’ de jQuery pour détecter si l’utilisateur défile et si le décalage entre le haut de la page et le bouton est supérieure à 100 pixels , on va ajouter la classe «show» sur l’élément ‘scroll-top-wrapper’.
Défiler la page vers le haut
L’étape suivante consiste à gérer l’événement clic sur le bouton et faire défiler vers le haut la page à l’aide de la fonction scrollToTop associé à la fonction animate() de jquery.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$(function(){ $(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('.scroll-top-wrapper').addClass('show'); } else { $('.scroll-top-wrapper').removeClass('show'); } }); $('.scroll-top-wrapper').on('click', scrollToTop); }); function scrollToTop() { verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0; element = $('body'); offset = element.offset(); offsetTop = offset.top; $('html, body').animate({scrollTop: offsetTop}, 500, 'linear'); } |
Là, ça devrait être bon, vous devriez être en mesure de scroller dynamiquement votre page.