基于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>
有些梦想虽然遥不可及，但不是不可能实现。只要我足够的强。
页:
[1]