仿bilibili个人主页返回顶部小火箭

这也算是填了半年前的挖的坑，今天分享一个仿b站的小火箭，基本上所有站都有可以用

你们可以自己试试效果，感觉还不错，由于技术有限，只能做到悬停动画，还做不到点击动画，b站扒下来的js代码又不能直接用，下面放一下食用代码

🌸食用代码

<style>
    .to-top {
        position: fixed;
        display: none;
        bottom: 100px;
        right: 20px;
        width: 62px;
        height: 85px;
        cursor: pointer;
        background-image: url(//s1.hdslb.com/bfs/static/jinkela/space/asserts/space-to-top.png);
        background-position: -40px -44px;
        transition: transform 0.3s ease-in;
        transform: translateY(0);
    }
    .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;
        }
    }
    

    @media (min-width: 1420px) {
        .to-top {
            margin-left: 712px;
        }
    }
</style>
<div class="to-top"></div>
<script>
    // 检测滚动位置来控制按钮显示/隐藏
    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);
</script>