7b2主题美化 仿哔哩哔哩网站页面返回顶部的火箭

一款仿哔哩哔哩的7b2主题返回顶部的火箭的美化效果，还是挺可爱萌萌哒的，有喜欢的可以按下方教程来部署。

代码教程

html代码：

<div class="to-top"></div>
xml
26 Bytes
© AA源码网
<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(图片地址);
    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;
    }
}
css
908 Bytes
© AHAP
/*小火箭*/

.to-top {
    position: fixed;
    display: none;
    bottom: 100px;
    right: 20px;
    width: 62px;
    height: 85px;
    cursor: pointer;
    background-image: url(图片地址);
    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;
    }
}

js代码：

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);
javascript
422 Bytes
© AHAP
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);

如果你使用的是子主题，那可以将代码放在后台子主题设置->基本设置->插入代码的菜单中

图片素材