Blogger | Intégrer un bouton "Back to top" avec un effet "smooth scroll".

Plop les bovins !!!

Bon il y a un petit truc qui me tracassait les pis depuis un bon moment, alors j’ai décidé de m’y attaquer cette nuit et de vous en faire profiter.

Je voulais un petit bouton « back-to-top » qui permette au lecteur de retourner en haut de la page en un clic ce qui est bien pratique quand le corps de votre page d’accueil est assez long.

Ça évite de devoir scroller à nouveau vers le haut ou de devoir faire mumuse avec la barre de défilement, ce qui à la longue devient assez chi… pour rester poli.

Alors pour un bouton simple la manipulation est assez simple et peut se faire en 2 secondes à l’aide d’une simple balise HTML comme celle-ci :

Un pro vous ferait ça en 2 minutes mais je dois vous avouer que n’étant pas un pro, j’ai un peu galéré pour arriver en partie à ce que je voulais. Je pense par conséquent que la méthode que j’ai utilisé peut vous intéresser si vous tournez sous Blogger et vous allez voir, ce n’est pas difficile du tout.

On va se faire ça en trois étapes :

– 1)   Une simple balise « div« .

– 2)   Un peu de CSS.

– 3)   Un petit script Jquery.

On va commencer par créer la balise HTML « div« , celle-ci doit contenir deux choses :

– Le lien de votre image.

– L’instruction qui va la relier au script Jquery (ici « btn_up« ).

Important !!!

Commencez par effectuer une sauvegarde de votre template avant de le modifier, on ne sait jamais.

Allons-y, commencez par télécharger et héberger votre image, moi j’ai pris une petite flèche sur fond blanc :

Créez ensuite la balise HTML qui va bien et placez la par exemple, avant dans votre template.

Maintenant que c’est fait ajoutez les lignes suivantes à la suite de celle décrite ci-dessus :

$(function(){
  $(‘#btn_up‘).click(function() {
    $(‘html,body’).animate({scrollTop: 0}, ‘slow‘);
  }); 

  $(window).scroll(function(){
     if($(window).scrollTop()  >100){
        $(‘#btn_up‘).fadeIn();
     }else{
        $(‘#btn_up‘).fadeOut();
     }
  });
});

La première partie « $(function() » va déterminer le comportement de la fenêtre lors de sa remontée, ici « slow » pour lui indiquer d’y aller mollo. 

La seconde partie va se charger de déterminer la position de la fenêtre et de masquer le bouton avec une petit effet de transition si le script constate que la page est en haut. 

Vous pouvez déterminer l’apparition du bouton plus ou moins bas dans la page en jouant avec la valeur indiquée dans le script, ici « > 100« ).

Il ne reste plus qu’à enregistrer les modifications et si tout c’est bien passé, vous devriez avoir un joli bouton back-to-top,  avec un joli effet de transition et un effet smooth scroll.

Vous pouvez tester sur le blog si vous voulez voir ce que ça donne.

La prochaine fois on va voir comment on peut remplacer l’image par un bouton full CSS mais pour cela il faut déjà que je trouve moi même comment faire hi hi …

J’y arriverai mais je ne sais pas quand hi hi, en attendant j’espère que cette petite bafouille vous aura été utile…

Je vous laisse une petite vidéo de NicolasThomas qui va vous en dire plus si ça vous tente.

Amusez-vous bien.

Moo !!!

Tuto déniché ici.