js---小火箭回到顶部
发布时间
阅读量:
阅读量
比较粗糙,能到到效果,点击小火箭回到顶部,期间有小火箭的特效,
用到了css3的动画,JS的滚动事件

#firetop {
width: 148px;
height: 250px;
background: url(<https://images.cnblogs.com/cnblogs_com/muyun123/1532955/o_rocket_button_up.png>);
cursor: pointer;
position: fixed;
bottom: ;
right: ;
transition: bottom 1s;
display: none;
}
#firetop:hover {
background;
}
body {
width: ;
height: 7000px;
}
@keyframes move {
{
background;
}
{
background;
}
}
(function () {
var);
//当有滚动时触发事件function () {
var//获取滚动条的移动距离var//屏幕可视区的高度if) {
firetop.style.display //让回到顶部的小火箭出现elseif) {
firetop.style.bottom //改变定位的位置 }
}
//点击事件function () {
var window.scrollY;
varfunction//定时器启动;
ifwindow.innerHeight) {
firetop.style.display //小火箭隐藏//清除动画//还原小火箭位置 clearInterval(timer);
}
window.scrollTo(//设置滚动条距离顶部的距离);
this//给动画 }
})();
全部评论 (0)
还没有任何评论哟~
