2012-05-11 16 views
7

Ho provato a implementare lo scorrimento uniforme in un indice di informazioni. Ho guardato questo jsFiddle http://jsfiddle.net/9SDLw/ e non riesco a farlo funzionare. Importa dove il codice è inserito nel documento HTML o qualcosa del genere?jQuery Smooth Scrolling

Ecco il mio codice:

JS (nella testa di documento):

<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 /> 

Cosa mi manca qui?

+0

Hai bisogno di mettere in un document.ready() –

risposta

10

jsBin demo

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

e che da qualche parte nel documento ...

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

ciò di cui sopra non è quello di utilizzare l'ancora recuperata href e usarlo come jQuery ' s # (id) selettore. Trovato quell'elemento ID, prendi il top offset e infine anima la pagina.

+0

se uso questo metodo, sono io intenzione di avere a venire con tonnellate di ID? Volevo implementare lo scorrimento fluido a un elenco di tipi di test, che sono in ordine alfabetico. Come potrei farlo usando questo metodo? – Ben

+0

@Ben vuoi dire che vuoi avere: 'a_link, b_link ...' e allo stesso tempo 'a_content, b_content' ecc, giusto? –

+0

Un po '. Fondamentalmente ho solo una lettera "A" con alcuni CSS. Poi sulla barra laterale ho un A che corrisponderebbe all'ancora del primo A. E così via e così via giù attraverso l'alfabeto. Quindi aggiungere ID sarebbe un dolore, credo. – Ben

-1

Devi avvolgere tutto il codice con

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

o semplicemente

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