Bouton scroll haut de page

**dhillig** · 08/05/2015, 18h13

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

Merci à vous et bon week-end,
dh

**NoSmoking** · 08/05/2015, 19h55

Bonjour,

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 !?!

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

Montre nous au moins ce que tu as tenté !

**dhillig** · 08/05/2015, 23h24

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

**melka one** · 09/05/2015, 13h08

jour

essai ce script

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**dhillig** · 09/05/2015, 16h09

Bonjour melka one,
Ça fonctionne du tonnerre !!! MERCI !!!

Par contre, je n'ai pas réussi à accélérer le scroll

Mais TOP !
Encore merci et bon Week-end !
dh

**melka one** · 09/05/2015, 21h28

tu a bien modifié la ligne commenté

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

duree:0.5, 			//duree en seconde

**dhillig** · 10/05/2015, 19h08

Bonjour melka one,
Oui, j'ai bien modifié la durée, mais le prob était ailleurs (prob d'affichage/débit etc... je suppose

).
Tout fonctionne nickel chrome

!!!
Encore merci pour ce script !
Bonne fin de week-end,
dh

**melka one** · 10/05/2015, 22h16

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**dhillig** · 11/05/2015, 08h59

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

Bouton scroll haut de page

JavaScript

Discussions similaires

Partager

Partager