1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style type="text/css">
.btt{
opacity:0;
height:50px;
width:50px;
background:red;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwQAADsEBuJFr7QAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC41ZYUyZQAAAexJREFUaEPtlk1KQ0EQhEXwBOLaQ2TrJkYhaBbeKAcXjba+kqJT8z8THjIFH9Gern5dGUhy9fh8OP0HZpC1MYOsjRlkbcwga2NokG9dMaqnF8OG+xCm7fblfjn/4N4eDAniA0CoKU8r3YdiWcOLz5S3hV4D3+2VFw2Jexbv5/LaRLd3hhdMiXvVrBpaB2XfhBd73MwqmofwQqVir5pdQu2A6pvw4hm/s1+rPpprgnQLAfGs5RnFHwBVN8IP7iWeqZ6ZosTU/Sa8eLZ7dpIiAz9olPgZaocQOc1FN7Hbvd0ej8fr5d8/wbvZbG4e9vs7rnmhbrhdgqQas0PgnPtZqBk5M/l82SVKsokHKvG593ipvpjQz54QoYaqmwAhT6g3JnjIJ79ngkl5gBKf53i5ltPP4nPvBckgLK7h75jXgLiW62HhTHmNpiDKZ3AfhJqhPAb3hKR8RvdlDPSwUDOUB3AfCzXlMZJBFKqfQR8LNUN5GO7N9YYOzj61gOuToNerdkaOL3Z49gt0+5T3E5uXYOUsRPy8mY7gr+LcoUV0ClLExYKgZihPKzNIDCzsAwDlaWVokBDK08pFgvibUZ5WhgZhoWYoTyszSAxeWqE8rcwgMfziHuVpZchQA0tDI0MYwwZfmhlkbcwg6+Jw+gInXCrAyO91ZwAAAABJRU5ErkJggg==');
position:fixed;
bottom:30px;
margin:5px;
right:20px;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border-radius:4px;
}
</style>
<script>
var scr_top={
diff:0,
vitesse:0,
inter:'',
duree:0.2, //duree en seconde
btn_vue:120, //moment ou le bouton est affiché
el:'',
ddl:'',
init:function(){
clearInterval(this.inter);
this.diff=this.ddl.scrollTop;
this.vitesse=Math.round(this.diff/(50*this.duree));
this.inter=setInterval(scr_top.lance_scroll,20);
},
lance_scroll:function(){
if(scr_top.diff-scr_top.vitesse<=0){
scr_top.ddl.scrollTop=0;
clearInterval(scr_top.inter);
return false;
}
scr_top.ddl.scrollTop-=scr_top.vitesse;
scr_top.diff-=scr_top.vitesse;
},
tombou:function(){
var hauteur_scroll=scr_top.ddl.scrollTop;
hauteur_scroll>scr_top.btn_vue ? scr_top.el.style.opacity=1 : scr_top.el.style.opacity=0;
},
fleche:function(){
var el=document.createElement('div');
el.setAttribute('onclick','scr_top.init()');
el.setAttribute('class','btt');
scr_top.el=document.body.appendChild(el);
scr_top.ddl=(document.body.scrollTop) ? document.body : document.documentElement;
typeof window.addEventListener == 'undefined' ? attachEvent("onscroll",scr_top.tombou) : document.addEventListener("scroll",scr_top.tombou, false);
}
}
typeof window.addEventListener == 'undefined' ? attachEvent("onload",scr_top.fleche) : window.addEventListener("load",scr_top.fleche, false);
</script>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html> |
Partager