### [仿哔哩哔哩网站页面回顶部的火箭](https://wws.ysu2.com/article/133706)

**Published:** 2023-12-09T14:13:50

**Author:** gao19970828

**Excerpt:** 仿哔哩哔哩网站页面回顶部的火箭 html代码： <div class=”to-top”></div> css代码： /*小火箭*/ .to-top { position: fixed; display: none; 

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

![](https://img.ahap.cn/files/2023/12/20231201145812632.png)

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(https://img.ahap.cn/files/2023/12/20231201145812632.png);

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

图片地址：https://img.ahap.cn/files/2023/12/20231201145812632.png

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

**Tags:** ps, 主题, 图片, 网站, 页面

**Categories:** 精选插画

---