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
<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
#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;
}