jQuery Smooth Scrolling

Question

Ich habe versucht, glattes Scrollen in einen Index von Informationen zu implementieren. Ich habe dieses jsFiddle http://jsfiddle.net/9SDLw/ angeschaut und ich kann es nicht zur Arbeit bringen. Ist es wichtig, wo der Code in das HTML-Dokument eingefügt wird?

Hier ist mein Code:

JS (in Anfang des Dokuments):

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

Markup:

Link-

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

Anchor

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

Was fehlt mir hier?

Answer 1

jsBin demo

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

und als irgendwo in Ihrem Dokument ...

<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); 
}); 

, was die oben tut, ist die abgerufene Anker verwenden href und benutze es als jQuery ' s # (ID) Selektor. Gefunden, dass ID-Element, es ist top offset und schließlich die Seite animieren.

Answer 2

Sie müssen wickeln den gesamten Code mit

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

oder

nur

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