锚点平滑跳转

👉🏻阅读模式 | | 2017/12/21 | 778次

html代码

<div id="top" class="append_box mb20">
    平滑跳转到底部：<a href="#bottom" class="smooth">滑到底部</a>
</div>
<div id="appendBox" class="append_box">
    <img width="300" height="3281" src="http://ss4.sinaimg.cn/bmiddle/6200b7a8t8b6743480673&690" />
</div>
<div id="bottom" class="append_box mb20">
    平滑回到顶部：<a href="#top" class="smooth">回到顶部链接</a>
</div>

js代码

$(".smooth").click(function(){
    var href = $(this).attr("href");
    var pos = $(href).offset().top;
    $("html,body").animate({scrollTop: pos}, 1000); 
    return false;
});