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 ответа:
<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, получил его topoffset
и, наконец, анимировал страницу.