retour haut de page à l'execution d'un script

**idiotbox** · 10/10/2013, 16h38

Bonjour,

J'ai écrit ce code pour un site qui contient une suite d'images en scroll et une légende fixe par dessus.

Il y a un lien 'texte' qui permet de masquer la légende et un lien 'image' qui permet de masquer les images. (pour mieux voir les images et/ou mieux lire le texte)

Seulement, lorsque l'on clique pour faire apparaître ou disparaître le texte par exemple, ça remonte automatiquement en haut de la page en revenant donc à la première image au lieu de garder le scroll la où il était. Comment faire pour permettre à l'utilisateur de masquer la légende en cours de route et en conservant la position du scroll la ou il s'etait arreté ?

Autrement dit, ne pas remonter en haut de la page à l’exécution des scripts

merci beaucoup d'avance,

J'ai chargé la page ici

et voici mon code :

Code html :

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
<html><head>
<link rel="stylesheet" type="text/css" href="css/style2.css">
<script type="text/javascript">
function part1() {
    var contacttext = document.getElementById('img');
    if (contacttext.className == 'visible') {
        contacttext.className = 'hidden';
    } else {
        contacttext.className = 'visible';
    }
}
 
function part2() {
    var contacttext = document.getElementById('txt');
    if (contacttext.className == 'visible') {
        contacttext.className = 'hidden';
    } else {
        contacttext.className = 'visible';
    }
}
</script>
	</head>
	<body>
	<div id="cacher-txt" ><a onclick="part2();"  href="#">texte</a> 	</div>
		<div id="txt" class="visible" >	
		<div id="legende" >
                 Shelf 440 x 40 x 4 cm, </br>
                 </div>
                 </div>
	<div id="cacher-img" ><a onclick="part1();"  href="#">images</a> /div>
	<div id="img" class="visible" >		
	<div id="visuels">
		<img src="img/p6/1.jpg">
		<img src="img/p6/2.jpg">
		<img src="img/p6/3.jpg">
		<img src="img/p6/4.jpg">
		<img src="img/p6/5.jpg">
		<img src="img/p6/6.jpg">
		<img src="img/p6/7.jpg">
	</div>	
</div>			
</body></html>

et le css :

Code css :

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
 .hidden {
  visibility:hidden;
}
#legende {
  position:fixed;
  left:23%;
  top:80%;
  z-index:500;
  font-family:arial;
  font-size:10px;
  color:black;
}
#img {
  position:absolute;
  width:79%;
  right:5.5%;
  left:15.5%;
  top:20%;
  z-index:100;
}
#img img {
  width:100%;
}
#cacher-img {
  position:fixed;
  right:20%;
  top:15%;
  z-index:500;
}
#cacher-txt {
  position:fixed;
  right:14%;
  top:15%;
  z-index: 520;
}

**beekeep** · 10/10/2013, 17h51

Salut,

il ne faut pas utiliser de lien pour les "boutons" (ou enlever le href mais ça n'a plus d'intérêt).

Donc utiliser une div avec curor: pointer.

**NoSmoking** · 10/10/2013, 20h21

Bonjour et bienvenue sur DVP.

Code html :

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

<div id="cacher-img" ><a onclick="part1();"  href="#">images</a> /div>

la balise de fin DIV est mal écrite mais cela n'est pas bien grave, ce qui l'est c'est que tu n'annule pas l'action par défaut du click sur le lien.

Une recherche minimum t'aurais renseigné la dessus.

J'y vais de mon petit couplet, une balise BUTTON avec un peu de CSS remplacerait avantageusement ton lien qui n'en est pas un.

**idiotbox** · 11/10/2013, 20h28

Super! Merci beaucoup à vous deux, ça marche impeccable!

A bientôt,
Bonne soirée!

retour haut de page à l'execution d'un script

JavaScript

Discussions similaires

Partager

Partager