Une flèche qui permet un retour “haut de page”, assez pratique pour les articles longs.
Elle permet un accès rapide au menu, sans avoir à utiliser la molette de la souris.

Comment procéder ? 

Nous utiliserons le javascript et le CSS pour cela.
Téléchargeons jquery.js puis plaçons-le dans le répertoire /static/js.
Ajoutons également une image de flèche (que je nomme top.png) dans le répertoire /static/images.

Écrivons maintenant le code javascript ainsi que le code CSS à la fin du fichier /themes/nom_du_theme/layouts/partials/header.html ; cela permettra cet ajout sur toutes les pages du blog.

Le script 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="/js/jquery.js" type="text/javascript"></script>	
<script type="text/javascript">
 //<![CDATA[
 $(window).scroll(function() {
 if($(window).scrollTop() == 0){
 $('#scrollToTop').fadeOut("fast");
 } else {
 if($('#scrollToTop').length == 0){
 $('body').append('<div id="scrollToTop">'+
'<a href="#"><img src="/images/top.png" alt="" /></a>'+
'</div>');
}
$('#scrollToTop').fadeIn("fast");
 }
});
$('#scrollToTop a').live('click', function(event){
  event.preventDefault();
 $('html,body').animate({scrollTop: 0}, 'slow');
});
//]]>
</script>

Le CSS 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
#scrollToTop a{
  display: block;
  font-size: 1em; 
  text-decoration: none;   	
  position: fixed;
  right: 10px;
  bottom: 10px;    	
}	
#scrollToTop a:hover{
  text-decoration:none;	
}	
#scrollToTop img{
  padding:0;	
}	
#scrollToTop a img{
  border: none;	
}