Bouton top au scroll

Le principe consite lors du scroll de la page, de faire apparaître un bouton pour remonter en haut de la page via jQuery.
Le code jQuery consiste dans un premier temps à mettre en place une condition d'affichage ou non pour le bouton lors du scroll en se servant des fonctions .scroll() et .scrollTop().
Puis, dans un second temps, utiliser la fonction .animate() pour instaurer un effet de "smooth scroll" (défilement fluide) lors du clic sur le bouton.

Code HTML

<a href="#" class="go_top">Remonter</a>

Le mot "Remonter" s'affichera si le CSS est désactivé sur le navigateur.

Code CSS

.go_top {
  background: url("votre_image.png") no-repeat;
  display: none;
  position: fixed;
  width: 128px; /* A régler selon votre image */
  height: 128px; /* A régler selon votre image */
  bottom: 0; /* A régler selon votre image */
  right: 0; /* A régler selon votre image */
  text-indent: -9999px;
}

Code jQuery

$(document).ready(function() {
  // Condition d'affichage du bouton
  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $(".go_top").fadeIn();
    } else {
      $(".go_top").fadeOut();
    }
  });
  // Evenement au clic
  $(".go_top").click(function() {
    $("html, body").animate({ scrollTop: 0 }, 800);
    return false;
  });
});

La valeur 100 à la ligne $(this).scrollTop() > 100 correspond au nombre de pixels scrollés.

Sources

.scroll() : http://api.jquery.com/scroll ;
.scrollTop() : http://api.jquery.com/scrollTop ;
.animate() : http://api.jquery.com/animate.