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

一款仿哔哩哔哩的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);

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

图片素材

此处内容已隐藏，请评论后刷新页面查看.

温馨提示：若内容/图片/下载链接失效，请在下方留言或登录后私信站长。

本文结束END

本网站名称：AA源码网
默认解压密码：aaym.net
①本站所有资源免费，收取的费用仅为抵扣人工测试和服务器日常维护带来的消耗成本，请须知。
②因源码、模板、插件等程序具有可复制性，一经出售概不退款。
③本站部分资源来源网络或者用户投稿，如有侵权请联系删除（aaym@foxmail.com）
④本站资源仅用于个人学习和交流，如用于商业使用请选择正版程序。使用非正版程序须在24小时内卸载删除。
➣详细的版权声明请点击文章版权声明查看。
**下载/阅读均默认代表您已详细阅读版权声明并同意承担可能造成的所有损失及后果！

THE END