Mot clé "This"

Version imprimable

Mot clé "This"

Bonjour,

Je ne sais pas comment optimiser le code ci-dessous, qui fonctionne mais qui se répète beaucoup trop, j'ai fait quelques petits tests entre autres avec "this" mais je n'ai pas réussis..

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
<script>
**$(document).ready(function () {
****$('a[href="#join"]').click(function (e) {
******e.preventDefault();
******var targetOffset = $('a[name="join"]').offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****});
****$('a[href="#find-parking"]').click(function (e) {
******e.preventDefault();
******var targetOffset = $('a[name="find-parking"]').offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****});
****$('a[href="#parking-minute"]').click(function (e) {
******e.preventDefault();
******var targetOffset = $('a[name="parking-minute"]').offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****});
****$('a[href="#reserve"]').click(function (e) {
******e.preventDefault();
******var targetOffset = $('a[name="reserve"]').offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****});
****$('a[href="#parking-mounth"]').click(function (e) {
******e.preventDefault();
******var targetOffset = $('a[name="parking-mounth"]').offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****});
****$('a[href="#getin-getout"]').click(function (e) {
******e.preventDefault();
******var targetOffset = $('a[name="getin-getout"]').offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****});
****$('a[href="#community"]').click(function (e) {
******e.preventDefault();
******var targetOffset = $('a[name="community"]').offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****}); </script>

Ce que j'ai essayé et ne fonctionne pas :

Code:

1
2
3
4
5
6
7
8
<script>
**$(document).ready(function () {
****$('a[href="#join"], a[href="#find-parking"], etc..').click(function (e) {
******e.preventDefault();
******var targetOffset = $(this).offset().top;
******$('body').animate({ scrollTop: targetOffset }, 600);
****});
</script>

Merci d'avance :)

10/08/2015, 17h48
SylvainPV
C'est la guerre des étoiles ?

Utilise event.currentTarget pour récupérer l'élement d'où provient l'évènement, et ajoute une classe à tes liens concernés plutôt que tous les lister un par un (ici j'ai choisi targetToScroll) :
Code:

1 2 3 4 5 $('a.targetToScroll').click(function (e) { e.preventDefault(); var targetOffset = $(e.currentTarget).offset().top; $('body').animate({ scrollTop: targetOffset }, 600); });
je crois que this marche aussi car jQuery change le contexte d'appel pour les events listeners, mais je préfère les bonnes vieilles méthodes :)

"this" n'est pas un mot clé avec jquery, le mot clé qui correspond à l'objet est "$(this)".

Par ailleurs un simple ciblage avec $('body') ne fonctionnera pas avec IE ou Firefox. Il faut viser aussi le html.

En reprenant la suggestion de SylvainPV cela donne :
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 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>Document sans nom</title> <script src="//code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript"> $(function() { $('a.targetToScroll').click(function (e) { e.preventDefault(); var targetOffset = $(this).offset().top; $('html,body').animate({ scrollTop: targetOffset }, 600); }); }); </script> </head> <body> <div style="height:500px"></div> <a href="#a" class="targetToScroll" >azerty</a> <a href="#b" class="targetToScroll">wxcvbn</a> <div style="height:2500px"></div> </body> </html>