WEB前端--返回顶部特效源码

最新推荐文章于 2021-03-10 07:14:49 发布

weixin_30325071

最新推荐文章于 2021-03-10 07:14:49 发布

阅读量105

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/IDPUBLIC/p/11203416.html

版权

<!DOCTYPE html>
<html>

<body>
<script>
</script>
<div style="width: 100%;height: 200px;background: red;">111</div>
<div style="width: 100%;height: 200px;background: blueviolet;">111</div>
<div style="width: 100%;height: 200px;background: bisque;">111</div>
<div style="width: 100%;height: 200px;background: teal;">111</div>
<div style="width: 100%;height: 200px;background: tomato;">111</div>
<div style="width: 100%;height: 200px;background: red;">111</div>
<div style="width: 100%;height: 200px;background: blueviolet;">111</div>
<div style="width: 100%;height: 200px;background: bisque;">111</div>
<div style="width: 100%;height: 200px;background: teal;">111</div>
<div style="width: 100%;height: 200px;background: tomato;">111</div>
<div style="width: 100%;height: 200px;background: red;">111</div>
<div style="width: 100%;height: 200px;background: blueviolet;">111</div>
<div style="width: 100%;height: 200px;background: bisque;">111</div>
<div style="width: 100%;height: 200px;background: teal;">111</div>
<div style="width: 100%;height: 200px;background: tomato;">111</div>
<div style="width: 100%;height: 200px;background: red;">111</div>
<div style="width: 100%;height: 200px;background: blueviolet;">111</div>
<div style="width: 100%;height: 200px;background: bisque;">111</div>
<div style="width: 100%;height: 200px;background: teal;">111</div>
<div style="width: 100%;height: 200px;background: tomato;">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>

转载于:https://www.cnblogs.com/IDPUBLIC/p/11203416.html

weixin_30325071

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB前端--返回顶部特效源码

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style> #bot { position: fixed; right: 50px; bottom: 100px; ...
复制链接

扫一扫