仿哔哩哔哩网站页面回顶部的火箭
html代码：
<div class="to-top"></div>
css代码：
/*小火箭*/
.to-top {
position: fixed;
display: none;
bottom: 100px;
right: 20px;
width: 62px;
height: 85px;
cursor: pointer;
background-image: url(https://img.ahap.cn/files/2023/12/20231201145812632.png);
background-position: –40px –44px;
transition: transform 0.3s ease-in;
transform: translateY(0);
z-index: 999;
}
.to-top:hover {
animation: up-top .4s steps(1) infinite;
}
.to-top.fly {
transform: translateY(–1000px);
}
@keyframes up-top{
0% {
background-position-x: –40px;
}
16.5% {
background-position-x: –183px;
}
33% {
background-position-x: –326px;
}
49.5% {
background-position-x: –469px;
}
66% {
background-position-x: –612px;
}
82.5% {
background-position-x: –755px;
}
100% {
background-position-x: –40px;
}}
function toggleToTopVisibility() {
if ($(window).scrollTop() > 0) {
$(“.to-top”).fadeIn(100);
} else {
$(“.to-top”).fadeOut(100);
}
}
toggleToTopVisibility();
$(“.to-top”).click(function() {
$(this).addClass(“fly”);
setTimeout(() => {
$(this).removeClass(“fly”);
}, 300);
$(“html, body”).animate({ scrollTop: 0 }, “fast”);
});
$(window).scroll(toggleToTopVisibility);
图片地址：https://img.ahap.cn/files/2023/12/20231201145812632.png
如果您是子主题用户，您可以将代码放在后台子主题设置->基本设置->插入代码的菜单中