Balise <a> : ne pas modifier la position du scroll

**boboss123** · 13/03/2013, 13h05

Bonjour,

voici un exemple avec plein de balises <a>

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>test</title>
</head>
<body>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
	<p><a href="#">a</a></p>
 
</body>
</html>

Si on clique sur le dernier lien, ça me remet sur le haut de la page : comment faire pour ne pas que le scroll de ma page bouge lorsque je clique sur un lien (mes liens vont appeler des commandes via javascript) ?

J'ai testé plusieurs solutions qui ne fonctionnent pas :
- enlever href : le curseur de la souris n'est plus modifié au survole du lien
- mettre href="" : sous IE8, si j'ouvre ma page en local, l'explorateur s'ouvre lorsque je clique sur le lien XD

merci d'avance,

**Vil'Coyote** · 13/03/2013, 13h38

si tes lien ne font qu'appeler une fonction javascript ce n'est pas la meilleur option à utiliser. pourquoi ne pas prendre un bouton à la place? le onclick effectueras l'appel de tes fonctions ...

**boboss123** · 13/03/2013, 14h16

parce que j'utilise le framework Bootstrap et que les boutons n'ont pas la même apparence que les liens
=> j'aurais bien aimé limiter l'utilisation de css pour rester au plus proche du design du framework

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
<!DOCTYPE HTML>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
 
   	<style type="text/css">
        table .tab_actions {
                text-align: right;
        }
        </style>
</head>
 
<body>
	<div class="container">
 
		<div class="row">
			<div class="span8 offset2">
				<table id="myTable" class="table table-hover">
					<caption>Rendu que je veux</caption>
					<thead>
						<tr>
							<th>AAA</th>
							<th>BBBB</th>
							<th>1234567</th>
							<th></th>
						</tr>
					</thead>
 
					<tbody>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove"><i class="icon-remove"></i></a>
							</td>
						</tr>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove"><i class="icon-remove"></i></a>
							</td>
						</tr>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove"><i class="icon-remove"></i></a>
							</td>
						</tr>
					</tbody>
				</table>
 
 
				<table id="myTable" class="table table-hover">
					<caption>Rendu avec bouton</caption>
					<thead>
						<tr>
							<th>AAA</th>
							<th>BBBB</th>
							<th>1234567</th>
							<th></th>
						</tr>
					</thead>
 
					<tbody>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<button class="tab_modify" type="button"><i class="icon-pencil"></i></button>
								<button class="tab_remove" type="button"><i class="icon-remove"></i></button>
							</td>
						</tr>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<button class="tab_modify" type="button"><i class="icon-pencil"></i></button>
								<button class="tab_remove" type="button"><i class="icon-remove"></i></button>
							</td>
						</tr>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<button class="tab_modify" type="button"><i class="icon-pencil"></i></button>
								<button class="tab_remove" type="button"><i class="icon-remove"></i></button>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>	
 
 
	<!-- -------------------------------------- -->
	<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
	<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>	
</body>
</html>

=> Bootstrap propose des classe pour que des balises <a> est la même apparence que des <button> mais il me semble que l'inverse n'existe pas

**Bisûnûrs** · 13/03/2013, 14h43

Return false sur tes liens.

**boboss123** · 13/03/2013, 16h08

Envoyé par Bisûnûrs

Return false sur tes liens.

=> effectivement ça fonctionne (merci)

Mais ça me semble quand même plus propre de modifier le .css et d'utiliser les boutons comme l'a suggéré Vil'Coyote

Voici le résultat : les modifications restent mineures (j'espère juste que ça fonctionne de partout => ce qui à l'air le cas) :

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
 
<!DOCTYPE HTML>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
 
   	<style type="text/css">
        table .tab_actions {
                text-align: right;
        }
        .tab_actions .btn{
                background-image: none;
                border: none;
                background-color: transparent;
                text-shadow: none;
                padding: 0;
                margin: 0 2px;
                
                -webkit-border-radius: none;
                   -moz-border-radius: none;
                border-radius: none;
        }
 
        </style>
</head>
 
<body>
	<div class="container">
 
		<div class="row">
			<div class="span8 offset2">
				<table id="myTable" class="table table-hover">
					<caption>Rendu que je veux</caption>
					<thead>
						<tr>
							<th>AAA</th>
							<th>BBBB</th>
							<th>1234567</th>
							<th></th>
						</tr>
					</thead>
 
					<tbody>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove"><i class="icon-remove"></i></a>
							</td>
						</tr>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla (bug sous IE8)</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify btn"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove btn disabled"><i class="icon-remove"></i></a>
							</td>
						</tr>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>correction du bug mais ca ne va pas pour le hover</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify btn"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove btn disabled" style="background-color: #FFFFFF;"><i class="icon-remove"></i></a>
							</td>
						</tr>
					</tbody>
				</table>
 
 
				<table id="myTable" class="table table-hover">
					<caption>Rendu avec bouton</caption>
					<thead>
						<tr>
							<th>AAA</th>
							<th>BBBB</th>
							<th>1234567</th>
							<th></th>
						</tr>
					</thead>
 
					<tbody>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<button class="tab_modify" type="button"><i class="icon-pencil"></i></button>
								<button class="tab_remove disabled" type="button"><i class="icon-remove"></i></button>
							</td>
						</tr>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla (bug sous IE8)</td>
							<td class="tab_actions">
								<button class="tab_modify btn" type="button"><i class="icon-pencil"></i></button>
								<button class="tab_remove btn disabled" type="button"><i class="icon-remove"></i></button>
							</td>
						</tr>
					</tbody>
				</table>
 
 
				<table id="myTable" class="table table-hover">
					<caption>Rendu avec return false</caption>
					<thead>
						<tr>
							<th>AAA</th>
							<th>BBBB</th>
							<th>1234567</th>
							<th></th>
						</tr>
					</thead>
 
					<tbody>
 
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla bla bla</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify " onClick="return false"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove " onClick="return false"><i class="icon-remove"></i></a>
							</td>
						</tr>
						<tr>
							<td>4000</td>
							<td>12345678</td>
							<td>bla bla (sans return false)</td>
							<td class="tab_actions">
								<a href="#" class="tab_modify btn"><i class="icon-pencil"></i></a>
								<a href="#" class="tab_remove btn disabled"><i class="icon-remove"></i></a>
							</td>
						</tr>
 
						</tbody>
				</table>				
			</div>
		</div>
	</div>	
 
 
	<!-- -------------------------------------- -->
	<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
	<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>	
</body>
</html>