Skip to content

[CSS3 – Jquery] Créer un lien ‘Retour en haut’ grâce à Jquery et CSS3

Soyez sociable ! Partagez :
  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Le lien ‘Retour en haut’ ou communément appelé Back To Top permet aux utilisateurs de revenir en haut de la page sans avoir à ‘scroller’ avec leur souris.
Cette fonctionnalité est vraiment utile pour votre site surtout si vous avez de longues pages ou que vous êtes adeptes de l’infinite scroll.

BackToTop : Le HTML

On va commencer par écrire le HTML de notre tutoriel.
Voici quelques impératifs :

  • Placez une balise HTML (<a>) à l’endroit où vous souhaitez que l’utilisateur revienne. N’oubliez pas d’y ajouter un ID (‘top’ pour l’exemple)
  • Ajoutez le lien de retour en bas de votre page (avant la fermeture du <body>)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<body>
  <nav>
    <!-- NAVIGATION -->
  </nav>
  <a id="top"></a>
  <div id="wrap">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <aside></aside>
        </div>
        <div class="col-md-8">
          <main>
            <h1>Tutoriel CSS Jquery - Back To Top</h1>
          </main>
        </div>
      </div>
    </div>
 </div>
 <a href="#top" id="back_to_top" class="toggle">  <i class="fa fa-angle-up"></i></a>
</body>

La structure HTML se base sur “Bootstrap” pour faciliter le placement.
Voici également le code CSS pour styliser notre environnement.

body{
  background:#f5f5f5;
}
nav{
  height: 50px;
  display:table;
  z-index: 1000;
  width:100%;
  background:#333;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
}

#wrap{
  width: 1170px;
  padding : 60px 10px 40px;
  margin: 0 auto 20px;
}

#wrap aside{
  display: block;
  background: #fff;
  border: solid 1px #ccc;
  min-height: 450px;
  margin-right: 10px;
}

#wrap main{
  display: block;
  background: #fff;
  border: solid 1px #ccc;
  min-height: 950px;
  padding: 20px 15px;
}

Ne vous arrêtez pas trop longtemps dessus, c’est vraiment pour le style.

Le tutoriel commence maintenant :

Styliser le bouton ‘BackToTop’

On commencera par placer le bouton ‘BackToTop’ en bas à droit de la fenêtre de l’utilisateur (c’est un standard…). Pour cela, nous allons utiliser le ‘position fixed’ de CSS :

#back_to_top{
  position: fixed;
  bottom: 30px;
  right: 30px;
}

Et nous y ajoutons un peu de style, pour le rendre plus sexy.
Au passage, j’ajoute le frameworks d’icônes : ‘Font Awesome‘ me permettant d’avoir une jolie petite icone plutôt qu’un texte.

html

<a href="#top" id="back_to_top"><i class="fa fa-angle-up"></i></a>

css

#back_to_top{
  position: fixed;
  bottom: 30px;
  right: 30px;
  
  width: 40px;
  height: 40px;
  color: #fff;
  background: #3e3e3e;
  text-align:center;
  line-height: 40px;
  font-size: 22px;
  font-weight: 700;
}

En l’état, ça fonctionne, si vous cliquez sur le bouton, vous allez remonter en haut de votre page directement, sans animation… Mais ça n’est pas très glamour 🙂

BackToTop plus glamour

Pour rendre le bouton ‘BackToTop‘ plus sexy, on va ajouter les fonctionnalités suivantes :

  • Afficher le bouton que lorsque c’est nécessaire (au scroll de l’utilisateur)
  • Revenir en haut de la page avec une animation

Afficher le lien au scroll de l’utilisateur

Lorsque l’utilisateur scrollera (avec sa molette ou avec le curseur) dans la page, on ajoutera une class au bouton qui l’affichera si nécessaire, c’est à dire si l’utilisateur est suffisamment descendu sur la page.

/!\ Il est impératif d’ajouter Jquery à votre page pour que ce code fonctionne :

$(document).ready(function() {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $('#back_to_top').removeClass('toggle');
    } else {
      $('#back_to_top').addClass('toggle');
    }
  });
});

Evidemment, il faut ajouter le code CSS qui va bien :

#back_to_top{
  
  /* Il faut ajouter cette ligne aux propriétés existantes */
  opacity: 1;
}
/* Code à ajouter */
#back_to_top.toggle{
 opacity: 1;
}

Si vous souhaitez avoir encore plus de glamour à votre ‘BackToTop’, vous pouvez utiliser les transitions CSS :

#back_to_top{
  position: fixed;
  <strong>bottom: 30px;</strong>
  right: 30px;
  
  width: 40px;
  height: 40px;
  color: #fff;
  background: #3e3e3e;
  text-align:center;
  line-height: 40px;
  font-size: 22px;
  font-weight: 700;
  opacity: 1;
  -webkit-transition: opacity 0.5s, bottom 0.5s;
  -moz-transition: opacity 0.5s, bottom 0.5s;
  transition: opacity 0.5s, bottom 0.5s;
}
#back_to_top.toggle{
  opacity: 0;
  bottom: 50px;
  
  -webkit-transition: opacity 0.5s, bottom 0.5s;
  -moz-transition: opacity 0.5s, bottom 0.5s;
  transition: opacity 0.5s, bottom 0.5s;
}

Votre bouton ‘BackToTop’ apparaîtra de manière plus sexy.

Animation retour au en haut en Jquery

Pour ajouter l’animation qui vous permettra de revenir en haut de page, utilisez ce code Javascript/Jquery :

$('#back_to_top').click(function(e) {
  var anchor = $(this);
  $('body').stop().animate({
    scrollTop: $(anchor.attr('href')).offset().top
  }, 850);
  e.preventDefault();
 });

Une fois ce code ajouté, lorsqu’un utilisateur cliquera sur le bouton ‘BackToTop‘, la fenêtre devrait remonter là où vous avez placé la balise html:

<a id="top"></a>

Retrouvez l’ensemble du code sur ‘CodePen‘.

Si vous avez apprécié ce tutoriel, n’hésitez pas à le partager.

Si vous avez des questions ou un soucis, n’hésitez pas à commenter, je réponds assez facilement aux commentaires.

Enjoy it !

Soyez Sociable ! Partagez !
Published inCSSHTMLTutoriel
banner