jQuery平滑滚动

Posted 2023-05-08

【中文标题】jQuery平滑滚动

【英文标题】：jQuery Smooth Scrolling

【发布时间】：2012-05-20 08:02:21

【问题描述】：

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

我在这里错过了什么？

【问题讨论】：

你需要把它放在一个document.ready()中

【参考方案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>

而且比您文档中的某处...

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

【讨论】：

如果我使用这种方法，我将不得不拿出大量的 ID 吗？我想实现平滑滚动到按字母顺序排列的测试类型列表。我怎么能用这种方法做到这一点？

@Ben 你的意思是你想拥有：a_link, b_link ... 和同时a_content, b_content 等等，对吧？

有点。基本上我只有一个带有一些 CSS 的字母“A”。然后在侧边栏上，我有一个 A，它对应于第一个 A 的锚点。依此类推，依此类推。所以我认为添加 ID 会很痛苦。

当然，但是您甚至不需要添加那些a,b,c,d...。重要的是每个链接都有一个内容。如果这是你的情况，那很容易。如果你愿意，我可以给你看。

不过，它似乎无法在 Google Chrome 中运行。 （我认为平滑滚动现在是 Firefox 中的默认滚动行为。这解释了为什么它在 Chrome 中不起作用）。

【参考方案2】：

你必须用

包装你的所有代码

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

或者只是

$(function() ... );