锚点链接过渡动画

发表于

设置锚点和锚点元素id，使其具有平滑过渡效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<nav>
    <li>
        <a href="#01">1</a>
        <a href="#02">2</a>
        <a href="#03">3</a>
        <a href="#04">4</a>
    </li>
</nav>
<div>
    <div id="01"></div>
    <div id="02"></div>
    <div id="03"></div>
    <div id="04"></div>
</div>
1
2
3
4
$('nav a[href^="#"]').click(function(e){
    e.preventDefault();
    $('html, body').animate({scrollTop: $(this.hash).offset().top}, 200);
});

如果锚点高度不正确可通过 offset().top 调整