SECOND BOUTON RETOUR VERS LE HAUT MAIS SANS IMAGE ET EFFET DE TRANSITION
Un second retour vers le haut fluide mais cette fois sans besoin d'image, avec un effet de fade-in et transformation au passage de la souris et les couleurs de la flèche seront celles que vous avez sélectionné pour votre Blog (C'est celui présent sur mon blog).Pour le mettre sur votre site Blogger :
1/ Connectez-vous à Blogger
2/ Allez dans la section Mise en page
3/ Cliquez sur ajouter un gadget
4/ Dans la liste, sélectionnez "Ajouter un gadget Html/JavaScript"
5/ Copier intégralement le code ci-dessous puis collez le dans la partie "Contenu" de la fenêtre nouveau Widget de Blogger
6/ Ne pas mettre de titre
7/ Enregistrez
8/ Je vous recommande de placer ce widget dans le bas de votre blog avec la fonction glisser/déplacer
Voila vous avez la fonction retour vers le haut sur votre blog.
Sur votre site, il suffit d'insérer le code entre les balise <body> et </body> de votre page.
Vous pouvez paramétrer la position de votre bouton en modifiant la valeur des balises bottom et right
Bottom = position par rapport au bas de la page
Right = Position par rapport à la droite de la page
Pour changer le fond, il suffit de modifier la valeur de background-color
Code à copier et à coller dans votre page :
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(window).scroll(function() {
if($(window).scrollTop() == 0){
$('#scrollToTop').fadeOut("fast");
} else {
if($('#scrollToTop').length == 0){
$('body').append('<div id="scrollToTop">'+
'<a href="#">⇧</a>'+
'</div>');
}
$('#scrollToTop').fadeIn("fast");
}
});
$('#scrollToTop a').live('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop: 0},1500);
});
</script>
<style type="text/css">
#scrollToTop a {
position: fixed;
font-size:30px;
right: 20px;
bottom: 10px;
background-color: #141414;
padding: 1px 3px;
border: 1px solid #000;
-webkit-transition: all 0.5s linear 0s;
-moz-transition: all 0.5s linear 0s;
-ms-transition: all 0.5s linear 0s;
-o-transition: all 0.5s linear 0s;
transition: all 0.5s linear 0s;
}
#scrollToTop a:hover {
box-shadow: 0px 0px 5px #222;
-moz-box-shadow: 0px 0px 5px #222;
-webkit-box-shadow: 0px 0px 5px #222;
border-radius:20px;
-moz-border-radius:20px;
-webkit-border-radius:20px;
text-decoration: none !important;
}
</style>
