BOUTON RETOUR VERS LE HAUT SUR VOTRE BLOG
Aujourd'hui petit gadget assez sympa pour votre blog, un retour haut de page fluide avec JQuery.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
Vous pouvez modifier la valeur "160" par le chiffre que vous voulez, cela indique a quel moment le bouton apparaîtra lors du scroll de la page (Plus la valeur sera élevée, plus le bouton apparaîtra tardivement lors du scroll).
Vous pouvez modifier le chemin des images "http://cvli.ca/blog/images/back-to-top-1.png" et "http://cvli.ca/blog/images/back-to-top-2.png" afin d'afficher les images que vous désirez au lieu de celles présentent sur mon serveur.
Vous pouvez paramétrer la position de votre bouton en modifiant la valeur des balises bottom:15px; right:5px.
Bottom = position par rapport au bas de la page
Right = Position par rapport à la droite de la page
<!--Retour haut de page-->
<script src="http://cvli.ca/blog/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn_up').click(function() {
$('html,body').animate({scrollTop:0}, "slow");
});
$(window).scroll(function(){
if($(window).scrollTop()<160){
$('#btn_up').fadeOut();
}else{
$('#btn_up').fadeIn();
}
});
});
</script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</div>
<div id="btn_up">
<a style="up; position:fixed; bottom:15px; right:5px;" href="#" alt="Haut de Page" title="Haut de Page"><img src="http://cvli.ca/blog/images/back-to-top-1.png" id="haut" onmouseover="MM_swapImage('haut','','http://cvli.ca/blog/images/back-to-top-2.png',1)" onmouseout="MM_swapImgRestore()"/></a></div>
0 commentaires:
Enregistrer un commentaire