<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#start,#stop,#jiansu,#jiasu {
width: 100px;
height: 100px;
background-color: orange;
border-radius:50% ;
opacity: 0.5;
position: fixed;
right: 50px;
color: darkblue;
font-weight: 900;
font-size: 30px;
line-height: 100px;
text-align: center;
}
#start {
bottom: 400px;
}
#stop {
bottom: 300px;
}
#jiasu {
bottom: 200px;
}
#jiansu {
bottom: 100px;
}
</style>
</head>
<body>
// 此处省略文章
<div id="start">START</div>
<div id="stop">STOP</div>
<div id="jiasu">加速</div>
<div id="jiansu">减速</div>
<script type="text/javascript">
var start = document.getElementById(‘start‘),
stop = document.getElementById(‘stop‘),
jiasu = document.getElementById(‘jiasu‘),
jiansu = document.getElementById(‘jiansu‘),
timer,
bool = true,
speed = 10;
start.onclick = function () {
if(bool) {
console.log(start);
timer = setInterval(function () {
window.scrollBy(0, speed);
}, 100);
bool = false
}
}
stop.onclick = function () {
console.log(stop);
clearInterval(timer);
bool = true;
}
jiasu.onclick = function () {
speed ++;
}
jiansu.onclick = function () {
speed --;
}
</script>
</body>
</html>
原文：https://www.cnblogs.com/hjysunshine/p/12185515.html