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

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

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);

 

图片地址:点击下载

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

声明:本站部分文章来源于网络,如有危害到您的合法权益请联系客服

给TA打赏
共{{data.count}}人
人已打赏
未分类

视频转GIF工具(DU GIF Maker中文版)

2022-12-13 19:53:37

技术教程

使用 TinyMCE 编辑器中文语言配置过程

2022-6-21 19:06:43

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索