<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="format-detection" content="telephone=no" />
<title>页面滚动</title>
</head>
<body>
<div id="div" style="height: 2000px"></div>
<button id="btn">向下</button>
<style>
button{position: fixed; right: 10px; bottom: 10px;}
</style>
<script>
var btn = document.getElementById("btn");
var dv = document.getElementById("div");
var dvT = dv.scrollTop;
var step = 500;
var timer;
var clickTime = false;
var isclick=true;
var color = function () {
return 'rgb(' + [
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') + ')';
};
/*********短按************/
function click_fn() {
dvT += step;
window.scrollTo(0,dvT);
dv.style.backgroundColor = color();
}
/*********长按************/
function long() {
isclick=false;
dv.style.backgroundColor = color();
timer = setInterval(function(){
dvT += 5;
window.scrollTo(0,dvT);
},30)
}
btn.onmousedown = function(){
isclick=true;
clearTimeout(clickTime);
clickTime=setTimeout(long,1000);
};
btn.onmouseup = function(){
clearTimeout(clickTime);
clearInterval(timer);
if(isclick){
click_fn();
}
}
</script>
</body>
</html>
