返回顶部效果之bilibili动态小火箭【1.1版本更新】

效果

素材

代码

放在自定义css样式里

* { margi
: 0; paddi
g: 0; } body,html { width: 100%; height: 1500px; } .rock { positio
: fixed; right: 0; bottom: 0; width: 150px; height: 174px; backgrou
d-image: url("//heimo.16wl.com/wp-co
te
t/uploads/2023/01/20230101131052956.p
g"); overflow: hidde
; display:
o
e; } .rock:hover { backgrou
d-image: url("//heimo.16wl.com/wp-co
te
t/uploads/2023/01/20230101131154843.p
g"); a
imatio
: rockMove steps(4) .4s i
fi
ite; } @keyframes rockMove { 0% { backgrou
d-positio
-x: 0; } /* 25% { backgrou
d-positio
-x: -150px; } 50% { backgrou
d-positio
-x: -300px; } 75% { backgrou
d-positio
-x: -450px; } */ 100% { backgrou
d-positio
-x: -600px; } }

放在自定义javascript代码里面

/* bilibili小火箭 */ // 获取当前视口的大小 var viewHeight = docume
t.docume
tEleme
t.clie
tHeight; //小火箭添加单击事件 docume
t.querySelector(".rock").addEve
tListe
er("click", () => { //小火箭被单击,回到顶部 // docume
t.docume
tEleme
t.scrollTop = 0; //当然,也可以慢慢回到顶部 slowToTop(); }) //当然,这里使用节流会更好 wi
dow.o
scroll = fu
ctio
() { if (docume
t.docume
tEleme
t.scrollTop >= viewHeight) { //显示小火箭元素 docume
t.querySelector(".rock").style.display = "block"; } else { //隐藏小火箭 docume
t.querySelector(".rock").style.display = "
o
e"; } } wi
dow.o
resize = fu
ctio
() { viewHeight = docume
t.docume
tEleme
t.clie
tHeight; } /* 缓慢回到顶部 */ fu
ctio
slowToTop() { setTimeout(() => { let value = docume
t.docume
tEleme
t.scrollTop; if(value<=0){ docume
t.docume
tEleme
t.scrollTop = 0; }else{ docume
t.docume
tEleme
t.scrollTop -= 80; slowToTop(); } }, 1000/50); }

放在自定义底部HTML代码里面

<!-- bilibili小火箭 -->
<div class="mb20 hidden-xs"><div class="rock fly fadeIn"></div></div>

1.1版本2023.1.3支持缓慢升入

放在自定义CSS样式里面

* {
            margin: 0;
            padding: 0;
        }

        body,html {
            width: 100%;
            height: 1500px;
        }

        .rock {
            position: fixed;
            right: 0;
            bottom: 0;
            width: 150px;
            height: 174px;
            background-image: url("//heimo.16wl.com/wp-content/uploads/2023/01/20230101131052956.png");
            overflow: hidden;
            display: none;
        }
        
        .rock:hover {
            background-image: url("//heimo.16wl.com/wp-content/uploads/2023/01/20230101131154843.png");
            animation: rockMove steps(4) .4s infinite;
        }

        rock{display: none}.fly{display: block; animation: fly 3s;}@keyframes fly{0%{opacity: 0; transform: translate3d(0, 50px, 0);} 100%{opacity: 1; transform: translate3d(0, 0, 0);}}

        @keyframes rockMove {
            0% {
                background-position-x: 0;
            }

            /* 25% {
                background-position-x: -150px;
            }

            50% {
                background-position-x: -300px;
            }

            75% {
                background-position-x: -450px;
            } */
            100% {
                background-position-x: -600px;
            }
        }

放在自定义javascript代码里面

/* bilibili小火箭 */
        // 获取当前视口的大小
        var viewHeight = document.documentElement.clientHeight;
        //小火箭添加单击事件
        document.querySelector(".rock").addEventListener("click", () => {
            //小火箭被单击,回到顶部
            // document.documentElement.scrollTop = 0;
            //当然,也可以慢慢回到顶部
            slowToTop();
        })
        //当然,这里使用节流会更好
        window.onscroll = function () {
            if (document.documentElement.scrollTop >= viewHeight) {
                //显示小火箭元素
                document.querySelector(".rock").style.display = "block";
            } else {
                //隐藏小火箭
                document.querySelector(".rock").style.display = "none";
            }
        }
        window.onresize = function () {
            viewHeight = document.documentElement.clientHeight;
        }
        /* 缓慢回到顶部 */
        function slowToTop() {
            setTimeout(() => {
                let value = document.documentElement.scrollTop;
                if(value<=0){
                    document.documentElement.scrollTop = 0;
                }else{
                    document.documentElement.scrollTop -= 80;
                    slowToTop();
                }
            }, 1000/50);
        }

放在自定义底部HTML代码里面

<!-- bilibili小火箭 -->
<div class="rock fly mb20 hidden-xs"></div>