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)
关闭：在该函数

jQuery

$

防止默认事件来自锚点，而不是return false（来源：http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/）
使用$what询问锚点href的#something部分，以防止IE中的错误行为（因为如果您href="#some"有时会变成href="http://yoursite.com/yourcurrentpage/#some而不是

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

DEMO AT：http://jsfiddle.net/Nm3cT/

Answer 2

看看Chris Coyier's smooth Scrolling script。它确实如此，无需进一步配置。另外，它会更新浏览器上的地址。

调整平滑滚动代码

2 个答案: