javascript - 调整平滑滚动代码

Question

我正在尝试学习 jQuery，但此刻我的大脑一片空白。以下代码通过平滑过渡将我的页面滚动到顶部，但我希望这种平滑过渡适用于我网站上的所有锚/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)
• 闭包：在该函数内部使用jQueryas$
• 防止锚定而不是默认事件return false（来源： http: //fuelyourcoding.com/jquery-events-stop-misusing-return-false/）
• 使用$what询问#something锚点href的一部分，以防止IE中的不当行为（因为如果你href="#some"有时会变成它href="http://yoursite.com/yourcurrentpage/#some）

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

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

Answer 2

看看Chris Coyier 的流畅滚动脚本。它正是这样做的，不需要进一步的配置。另外，它会更新浏览器上的地址。