jquery卡通火箭返回顶部

原创已于 2025-06-27 15:44:42 修改 · 349 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-04-23 13:41:22 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>卡通火箭返回顶部</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#rocket-to-top {
position: fixed;
right: 30px;
bottom: 50px;
width: 60px;
height: 90px;
cursor: pointer;
z-index: 999;
display: none;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 90"><path d="M30 0 L60 60 L30 45 L0 60 Z" fill="%23FF6B6B"/><path d="M25 45 L35 45 L35 90 L25 90 Z" fill="%234ECDC4"/><circle cx="30" cy="30" r="10" fill="%23FFE66D"/><path d="M20 25 L40 25 L35 40 L25 40 Z" fill="%23FF9F1C"/></svg>') no-repeat;
transition: all 0.3s;
}

#rocket-to-top:hover {
transform: translateY(-5px);
}

.footer {
text-align: center;
padding: 20px;
margin-top: 1000px;
font-size: 12px;
color: #999;
}
</style>
</head>
<body>
<div id="rocket-to-top" title="返回顶部"></div>

<div class="content">

<h1>向下滚动查看返回顶部火箭</h1>
<p>滚动页面后，右下角会出现一个卡通火箭，点击它可以返回顶部。</p>
</div>

<div class="footer">

</div>