js 实现平滑回到顶部
用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的。(锚链接回到顶部时太快了)
JavaScript实现,带动画版本
原文: http://wenxi.fun/study/javascript/gotop.html
这里采用JavaScript脚本来实现回到顶部功能。
首先看看"返回顶部"按钮的css和html代码:
<style>
div#backToTop{
position:fixed;
display:none;
bottom:100px;
right:20px;
}
</style>
<div id="backToTop"><a href="#top">返回顶部</a></div>
下面是JavaScript脚本部分:
<script type="text/javascript" src="/third/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
//滚动超过一屏幕应该显示,否则消失
var pagelookheight = document.documentElement.clientHeight;
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>pagelookheight){
$("#backToTop").fadeIn(500);
//$("#backToTop").style.display = "block";
}
else
{
$("#backToTop").fadeOut(500);
//$("#backToTop").style.display = "none";
}
});
//当点击跳转链接后,回到页面顶部位置
$("#backToTop").click(function(){
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, 100);//动画效果
return false;
}
$('body').animate({ scrollTop: 0 }, 100);
return false;
});
});
});
</script>
改进,不再匀速
上面回到顶部的过程是匀速的,可以改为缓动效果,
详见:
温习饭: http://wenxi.fun/study/javascript/gotop.html