Défilement fluide de jQuery

Question

J'ai essayé de mettre en place un défilement fluide dans un index d'informations. J'ai regardé ce jsFiddle http://jsfiddle.net/9SDLw/ et je n'arrive pas à le faire fonctionner. L'endroit où le code est inséré dans le document HTML a-t-il une importance ?

Voici mon code :

JS (en tête du document) :

<script type="text/javascript">
$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 500);
    return false;
});
</script>

Markup :

Lien

<a href = "#G" rel = "" id="G" class="anchorLink">G</a><br />

Ancrage

<a name = "G" id="G"><span class = "letters">G</span></a><br />

Qu'est-ce que je rate ici ?

Answer 1

Démonstration de jsBin

<ul id="links">
    <li><a href="#a">Go to a</a></li>
    <li><a href="#b">Go to b</a></li>
</ul>

et puis quelque part dans votre document...

<h2 id="a">Article "a"</h2>
Lorem......
<h2 id="b">Article "b"</h2>
Lorem......

jQ :

$('#links a').click(function( e ){  
    e.preventDefault();
    var targetId = $(this).attr("href");
    var top = $(targetId).offset().top;
    $('html, body').stop().animate({scrollTop: top }, 1500);
});

ce qui est fait ci-dessus est d'utiliser l'ancre récupérée href et l'utiliser comme l'interface de jQuery. # (id) sélecteur. J'ai trouvé l'élément ID et j'ai récupéré son sommet. offset et enfin animer la page.

Answer 2

Vous devez envelopper tout votre code avec

$(document).ready(function(){ ... });

ou simplement

$(function(){ ... });