前端开发js滚动条回到顶部
摘要： 前端开发小游戏制作 游戏前端和web前端开发 游戏 前端开发 html 代码 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <meta……
| 前端开发小游戏制作 |
| 游戏前端和web前端开发 |
| 游戏 前端开发 |
html 代码
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
<title>回到顶部</title>
<meta name=”description” content=”” />
<meta name=”keywords” content=”” />
<link href=”” rel=”stylesheet” />
<style type=”text/css”>
body {
padding: 0;
margin: 0;
}
.box {
position: relative;
height: 5000px;
width: 100%;
}
.box1 {
height: 1000px;
width: 100%;
background: red;
}
.box2 {
height: 1000px;
width: 100%;
background: green;
}
.box3 {
height: 1000px;
width: 100%;
background: gray;
}
.box4 {
height: 1000px;
width: 100%;
background: yellow;
}
.box5 {
height: 1000px;
width: 100%;
background: blue;
}
.scroll {
height: 30px;
width: 30px;
background: #4cc9c8;
position: fixed;
right: 10px;
bottom: 10px;
display: none;
}
</style>
</head>
<body>
<div class=”box”>
<div class=”box1″></div>
<div class=”box2″></div>
<div class=”box3″></div>
<div class=”box4″></div>
<div class=”box5″></div>
<div class=”scroll” id=”scroll”></div>
</div>
<script type=”text/javascript”>
window.onscroll = function() {
var oScroll = document.getElementById(‘scroll’)
var winH = document.body.clientHeight
var scrollT =
parseInt(document.body.scrollTop) ||
parseInt(document.documentElement.scrollTop) ||
parseInt(window.pageYOffset)
var time = null
var spped = 0
if (scrollT > 1000) {
oScroll.style.display = ‘block’
} else {
oScroll.style.display = ‘none’
}
oScroll.onclick = function() {
time = setInterval(function() {
speed = Math.ceil(scrollT / 50)
console.log(scrollT)
if (scrollT > 0) {
scrollT -= speed
document.body.scrollTop = scrollT
document.documentElement.scrollTop = scrollT
window.pageYOffset = scrollT
} else {
clearInterval(time)
}
}, 10)
}
}
</script>
</body>
</html>
| 前端游戏开发的背景 |
| 游戏开发前端薪资 |
| 开发狼人杀游戏前端 |
| 前端开发 游戏 |
» 本文来自：前端开发者 » 《前端开发js滚动条回到顶部》
» 本文链接地址：https://www.rokub.com/7314.html
» 您也可以订阅本站：https://www.rokub.com
近期评论