- it技术
- 【Jump】 js 控制页面的滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jump
</title>
<style>
#box {
background-color: pink;
margin-top: 250px;
width: 100px;
height: 2000px;
}
.btn{
position: fixed;
top: 50%;
left: 50%;
}
</style>
</head>
<body>
<div id="box"></div>
<div class="btn">
<button onclick="jump.run('#box', 200)">+200
</button>
<button onclick="jump.run('#box', -200)">-200
</button>
</div>
<script>
class Jump {
constructor(){
this._start = 0
this._initialPosition = 0
}
_step(timestamp) {
if(!this._start) {
this._start = timestamp
}
const elapsed = timestamp - this._start;
const nextPos = this._initialPosition
+ Math[this.offset > 0 ? 'min' : 'max']((elapsed / this.duration) * this.offset, this.offset)
window.scrollTo(0, nextPos)
if (elapsed < this.duration) {
window.requestAnimationFrame(this._step.bind(this))
} else {
this._start = 0
}
}
run(target, offset, duration = 500){
this.element = document.querySelector(target)
this.duration = duration
this.offset = offset
this._initialPosition = window.scrollY || window.pageYOffset
console.log(this._initialPosition);
window.requestAnimationFrame(this._step.bind(this))
}
}
const jump = new Jump()
</script>
</body>
</html>
