利用 jQuery 实现锚点平滑移动

记录一个用 jQuery 实现点击锚点链接后平滑移动的方法。

1
2
3
4
5
6
7
8
9
var $root = $('html, body');

$('a[href^="#"]').click(function () {
$root.animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);

return false;
});

如果想更新地址栏的话,就这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
var $root = $('html, body');

$('a[href^="#"]').click(function() {
var href = $.attr(this, 'href');

$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});

return false;
});

References

Smooth scrolling when clicking an anchor link