<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
height: 1000px;
}
button {
margin-top: 900px;
bottom: 0;
}
</style>
</head>
<body>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
<button>点我回顶部</button>
<script>
function animate (body) {
body.timer = setInterval(() => {
if (window.pageYOffset === 0) {
clearInterval(body.timer)
body.timer = null
}
let step = (0 - window.pageYOffset) / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step)
window.scroll(0, window.pageYOffset + step)
}, 15)
}
btn = document.querySelector('button')
btn.addEventListener('click', () => {
let body = document.querySelector('body')
animate(body)
})
</script>
</body>
</html>
缓动动画实现返回顶部
最新推荐文章于 2022-10-06 15:27:10 发布