jquery - jQuery平滑滚动

Question

我试图实现平滑滚动到信息索引。我已经查看了这个 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 />

我在这里想念什么？

Answer 1

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

问：

$('#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 元素，将其置顶offset并最终为页面设置动画。

Answer 2

您必须用

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

要不就

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