Bouton scroll haut de page

Version imprimable

Bonjour à tous,
Je tente depuis un moment de créer un bouton qui apparaisse lors du scroll, et qui lors du clic fasse remonter la page à son sommet.
J'ai tenter plusieurs scripts sans aucun résultat. Je reste donc avec mon pauvre bouton dont les CSS sont :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 .puce { position: fixed; z-index: 1000; top: 650px; left: 800px; background-image: url(http://...bb.png); width: 80px; height: 80px; background-repeat: no-repeat; } .puce:hover { background-image: url(http:/...bj.png); }
et le html :

Code:

<a href="http://monsite.com"><div class="puce"></div></a>

Par conséquent, mon bouton est toujours présent (même quand on ne scrolle pas), et le clic ne fait que rafraichir la page :(
Si quelqu'un a une idée 8-)
Merci à vous et bon week-end,
dh

08/05/2015, 18h55
NoSmoking

Bonjour,

Citation:

Je reste donc avec mon pauvre bouton (...)et le clic ne fait que rafraichir la page :(

sauf que ton BOUTON est un LIEN qui recharge ta page, par nature, à chaque fois que tu le cliques, d'ailleurs pourquoi mettre une DIV en plus à l'intérieur !?!

Citation:

J'ai tenter plusieurs scripts sans aucun résultat.

Montre nous au moins ce que tu as tenté !
08/05/2015, 22h24
dhillig

Slt NoSmoking,
Merci pour ta réponse. Merci !!!
Pour ce qui est de la "puce"(bouton), j'avais commencé par mettre un div image (avec effet survolé via Dreamweaver). Il m'a semblé plus propre d'affecter ce :hover via les CSS (d'où un href sur le div). Peut-être ai-je eu tort ?
J'ai tenté les méthodes suivantes (en supprimant donc les CSS et HTML de mon bouton initial) :
http://integrateurinformatique.com/a...ers-haut-page/
Le suivant :
http://www.johanbleuzen.fr/blog/ajou...ut-avec-jquery
et ce dernier :
http://www.rbastien.com/blog/2015/02/scroll-to-top/
Il est vrai que ma page n'est pas classique, c'est une page TUMBLR, donc pas créée par moi. Mais suite à ma dernière question/discussion, je tente d'être bref (et non littéraire):
http://www.developpez.net/forums/d15...s/#post8218221
Bonne soirée et encore merci,
dh

jour

essai ce script

Code:

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<style type="text/css">
 
#btt{
opacity:0;
height:50px;
width:50px;
background:red;
position:fixed;
top: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;
}
</style>
<script>
 
var scr_top={
 
diff:0,
vitesse:0,
inter:'',
duree:0.5, 		//duree en seconde
btn_vue:120,		//moment ou le bouton est affiché
 
	init:function(){
 
		clearInterval(this.inter);
 
		this.diff=document.documentElement.scrollTop || document.body.scrollTop;
 
		this.vitesse=Math.round(this.diff/(50*this.duree));
 
		this.inter=setInterval(scr_top.lance_scroll,20);
	},
 
	lance_scroll:function(){
 
		var ddl=(navigator.vendor) ? document.body : document.documentElement;
 
		if(scr_top.diff-scr_top.vitesse<=0){
 
			ddl.scrollTop=0;
			clearInterval(scr_top.inter);
			return false;
		}
		ddl.scrollTop-=scr_top.vitesse;
		scr_top.diff-=scr_top.vitesse;
	},
 
	tombou:function(){
 
		var hauteur_scroll=document.documentElement.scrollTop || document.body.scrollTop;
 
		hauteur_scroll>scr_top.btn_vue ? document.querySelector("#btt").style.opacity=1 : document.querySelector("#btt").style.opacity=0;
	}
}
 
typeof window.addEventListener == 'undefined' ? attachEvent("onscroll",scr_top.tombou) : document.addEventListener("scroll",scr_top.tombou, false);
 
 
</script>
</head>
<body>
<div id='btt' onclick='scr_top.init()'>scroller</div>
<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>

09/05/2015, 15h09
dhillig

Bonjour melka one,
Ça fonctionne du tonnerre !!! MERCI !!! :ptdr:
Par contre, je n'ai pas réussi à accélérer le scroll :roll: Mais TOP !
Encore merci et bon Week-end !
dh
09/05/2015, 20h28
melka one

tu a bien modifié la ligne commenté

Code:

duree:0.5, //duree en seconde
10/05/2015, 18h08
dhillig

Bonjour melka one,
Oui, j'ai bien modifié la durée, mais le prob était ailleurs (prob d'affichage/débit etc... je suppose :roll: ).
Tout fonctionne nickel chrome :D !!!
Encore merci pour ce script !
Bonne fin de week-end,
dh

j'ai un peut modifier le script pour qu'il cree le div contenant le bouton dynamiquement comme ca pas besoin d'adapter le html on peut meme envisager de mettre le js et le css dans des fichiers separé et il suffirait juste d'appeler les fichier

Code:

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>

11/05/2015, 07h59
dhillig

Bonjour melka one,
Je ne sais pas pourquoi mais je n'arrive pas à faire fonctionner ce dernier script... rien n'apparaît...
Mais le script précédent est TOP ;)
Encore merci et bonne journée,
dh