js编写缓慢回到顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>缓慢回到顶部</title>
<style>
body {
height: 2000px; /* 仅用于测试滚动效果 */
}
#scrollToTop {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
padding: 10px;
background-color: #007bff;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div id="scrollToTop">回到顶部</div>
<script>
const button = document.getElementById('scrollToTop');
// 显示或隐藏按钮
window.addEventListener('scroll', () => {
if (window.scrollY > 200) {
button.style.display = 'block';
} else {
button.style.display = 'none';
}
});
// 平滑回到顶部
button.addEventListener('click', () => {
const start = window.scrollY;
const duration = 500; // 动画持续时间，单位：毫秒
let startTime = null;
function scrollAnimation(currentTime) {
if (startTime === null) startTime = currentTime;
const timeElapsed = currentTime - startTime;
const progress = Math.min(timeElapsed / duration, 1);
const easeInOut = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress;
window.scrollTo(0, start - start * easeInOut);
if (timeElapsed < duration) {
requestAnimationFrame(scrollAnimation);
} else {
window.scrollTo(0, 0); // 确保最终位置准确
}
}
requestAnimationFrame(scrollAnimation);
});
</script>
</body>
</html>