Utilisation : un bouton haut de page qui apparaît dans un coin de la page quand l'utilisateur descend de la page et clique sur ce bouton pour remonter

A mettre sur un calque qui est présent dans toutes les pages du site ça va plus vite, sinon mettre sur chaque page

1. glisser déposer : bloc de code source (javascript, end body)
2. copier/coller dedans ce code :
/*début top-page*/
$(function(){
  $('.scrollup').click(function() {
    $('html,body').animate({scrollTop: 0}, 'slow');
  });
 
 $(window).scroll(function(){
    if ($(window).scrollTop() < 250){  /*définir à partir de quelle hauteur le bouton apparaît*/
        $('.scrollup').stop().animate({'opacity':0},function(){
           $(this).hide();
         });
    } else {
        $('.scrollup').stop().show().animate({'opacity':1});
    }
});
});
/*FIN TOP PAGE*/

4. Mettre un cadre avec classe personnalisée : scrollup
 - distance bas et droite : 50px (par exemple) et supprimer alors les distace haut et gauche
 - largeur 40, hauteur 40 (exemple)
 - mettre une image d'arrière plan

5. mettre bloc de code source : CSS/header
.scrollup {
    position: fixed !important;
    display: none;
 }

c'est tout. (après il y a plein de chose qu'on peut modifier c'est une base)
______________________________________________________________________________
______________________________________________________________________________

Pour un retour en haut de page en cliquant sur un élément de la page :
1. glisser déposer : bloc de code source (javascript, end body)
2. copier/coller dedans ce code :
/*début top-page*/
$(function(){
  $('.scrollup').click(function() {
    $('html,body').animate({scrollTop: 0}, 'slow');
  });
3. classe personnalisée scrollup à l'élément déclencheur




Edité par nico38 - 19 Avr 2015 à 20:16