jQuery плавная прокрутка


Я попытался реализовать плавную прокрутку в индекс информации. Я посмотрел на этот jsFiddle http://jsfiddle.net/9SDLw/ и я не могу заставить его работать. Имеет ли значение, где код вставлен в HTML-документ или что-то еще?

Вот мой код:

JS (в начале документа):

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

Разметка:

Ссылка

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

Якорь

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

Чего мне здесь не хватает?

2 7

2 ответа:

Демо JsBin

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

И чем где-то в вашем документе...

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

То, что описано выше, заключается в использовании извлеченного якоря href и использовании его в качестве jQuery # (id) селектор. Нашел этот элемент ID, получил его top offset и, наконец, анимировал страницу.

Вы должны обернуть весь ваш код с помощью

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

Или просто

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