仿哔哩哔哩网站页面回顶部的火箭

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(图片地址);
    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);

图片地址：https://img.dhaomu.com/uploads/2024/06/e5e99d3fef2abb380cfc2f255d4719de.png

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