基于JavaScript的网页返回顶部按钮实现
基于JavaScript的网页返回顶部按钮实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rocket Button</title>
<style>
#rocket {
position: fixed;
bottom: 50px;
right: 50px;
width: 50px;
height: 50px;
border: none;
cursor: pointer;
display: none;
}
/* 使用 SVG 图标 */
#rocket .icon {
width: 50px;
height: 50px;
transition: transform 0.3s ease;
}
@keyframes rocketLaunch {
0% {
transform: translateY(0) scale(1);
opacity: 1;
}
100% {
transform: translateY(-100vh) scale(0.5);
opacity: 0;
}
}
/* 添加悬停效果 */
#rocket:hover .icon {
transform: scale(1.1);
}
body {
margin: 0;
padding: 0;
height: 200vh;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<a class="back-to-top" id="rocket" aria-label="返回顶部">
<!-- 使用 SVG 图标 -->
<img class="icon" src="https://www.deepsook.cn/s/top.svg" alt="返回顶部">
</a>
<script>
const rocket = document.getElementById('rocket');
function debounce(func, wait) {
let timeout;
return function (...args) {
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(this, args), wait);
};
}
window.addEventListener('scroll', debounce(() => {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
rocket.style.display = 'block';
} else {
rocket.style.display = 'none';
}
}, 100));
rocket.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
rocket.style.animation = 'rocketLaunch 1s cubic-bezier(0.215, 0.610, 0.355, 1) forwards';
setTimeout(() => {
rocket.style.animation = '';
}, 1000);
rocket.style.transform = 'scale(0.9)';
setTimeout(() => {
rocket.style.transform = 'scale(1)';
}, 200);
});
</script>
</body>
</html>
网页设计中，返回顶部按钮如同夜空中的繁星，点缀用户体验的浩瀚宇宙。#rocket，这位时空旅者的驿站，静候于页面角落，随时准备点燃它的喷射引擎，带您穿梭回起点。只需轻触，即可启动这场秒速归途，享受那份丝滑般的回弹。让我们携手，以JavaScript之笔，绘制这一丝便捷与舒适的奇迹。🚀✨🌌 火箭升空，一键返顶！🚀
在这数字宇宙中，#rocket 乃是一座固定的灯塔，坐落页面右下角，静待君之召唤。轻触其身，网页瞬息穿梭，跃升至云端之巅。代码简而巧，逻辑清晰，JavaScript魔法般指引着归途。愿此火箭按钮，成为您探索网络世界的得力助手！🌟
页:
[1]