javascript - 调整平滑滚动代码

Question

我正在尝试学习 jQuery，但目前我的大脑一片空白。以下代码通过平滑过渡将我的页面滚动到顶部，但我希望这种平滑过渡适用于我网站上的所有 anchor /ID 链接(它只是一个寻呼机)。

$(document).ready(function() {

    $('a[href="#the-top"]').click(function (e) {
        $("html, body").animate({ scrollTop: $('#the-top').offset().top }, 1000);
        return false;
    });

});

如何更改代码来实现此目的？

Answer 1

jQuery(function($) {

    $('a[href^=#]').bind('click', function (evt) {
        var $what = $('#' + $(this).attr('href').split('#')[1]);
        $('html, body').stop().animate({ scrollTop: $what.offset().top }, 1000);
        evt.preventDefault();
    });

});

此代码中建议的更改:

• 将全局 $ 对象更改为 jQuery
• 只是jQuery(fn)作为document.ready(fn)
• 闭包:在该函数内使用 jQuery 作为 $
• 防止来自 anchor 的默认事件，而不是返回 false(来源:http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/)
• 使用 $what 请求 anchor href 的 #something 部分，以防止 IE 中的不当行为(因为如果您有 href="#一些” 有时它会变成 href="http://yoursite.com/yourcurrentpage/#some 相反)

所有这些都是可选的。你明白了。请随意更改。

演示地址:http://jsfiddle.net/Nm3cT/