html页面一键滑到最底端或最顶端

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

<a href="javascript:;" id="J_to_top" onclick="goToTop()"><img src="/src/images/index/to_top.png"></a>//去顶部图片按钮
<a href="javascript:;" id="J_to_bottom" onclick="goToBottom()"><img src="/src/images/index/to_bottom.png"></a>//去底部图片按钮

function goToBottom() {
    $("html,body").animate({scrollTop: $("#J_footer").offset().top}, 300);//定位到 id为J_footer的地方，后面的300是3秒滑到定位处
}
function goToTop() {
    $("html,body").animate({scrollTop: $("#J_top").offset().top}, 300);//定位到 id为J_top的地方，后面的300是3秒滑到定位处
}

//按钮样式
#J_to_bottom{display: inline-block;width: 45px;border-radius: 50%;position: fixed;bottom: 10%;right: 5%;}
#J_to_bottom img{width: 45px;border-radius: 50%}

#J_to_top{display: inline-block;width: 45px;border-radius: 50%;position: fixed;bottom: 20%;right: 5%;}
#J_to_top img{width: 45px;border-radius: 50%}

付图标两个

来源：oschina

链接：https://my.oschina.net/boringblue/blog/3145706