digital

利用 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

Mastodon