<!DOCTYPE HTML>
<HTML>
<head>
<Meta charset="utf-8" />
<Title></Title>
</head>
<style>
#bot {
position: fixed;
right: 50px;
bottom: 100px;
background: red;
color: #fff;
text-decoration: none;
display: none;
}
</style>
<body>
<script>
</script>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<div >111</div>
<a href="JavaScript:;" ID="bot" title="返回顶部">返回顶部</a>
</body>
<script type="text/JavaScript">
var dsq = null;
bot.onclick = function() {
dsq = setInterval(function() {
var gaodu = document.body.scrolltop || document.documentElement.scrolltop;
var sudu = Math.floor(-gaodu / 5);
document.body.scrolltop = document.documentElement.scrolltop = gaodu + sudu;
if(gaodu == 0) {
clearInterval(dsq);
}
},30);
}
window.onscroll = function() {
if(document.documentElement.scrolltop + document.body.scrolltop > 0) {
bot.style.display = "block";
} else {
bot.style.display = "none";
}
}
</script>
</HTML>
总结以上是内存溢出为你收集整理的WEB前端--返回顶部特效源码全部内容，希望文章能够帮你解决WEB前端--返回顶部特效源码所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）