自适应纯CSS版返回顶部代码,简易好学

爱折腾的星云 171
OUIMS博客广告

自适应纯CSS版返回顶部代码,简易好学 简介:

通常的返回顶部代码都是需要调用JS的,不过这次星云给大家带来的是,纯CSS+HTML返回顶部的代码。

一些懂的人都知道,JS是会让网站速度稍微降低浏览速度的,在一些强迫症患者下这点是容忍不了的。

所以星云就是这样的一个人,这才给大家带来纯CSS返回顶部代码。具体看下面:

自适应纯CSS版返回顶部代码,简易好学 测试截图:

自适应纯CSS版返回顶部代码,简易好学-第1张图片-OUIMS博客自适应纯CSS版返回顶部代码,简易好学-第2张图片-OUIMS博客

自适应纯CSS版返回顶部代码,简易好学 所需代码:

HTML代码:

<div class="gotop">
	<ul>
		<li><a id="goTopBtn" href="#"><i class="fhdb"></i><em>返回顶部</em></a></li>
		<li><a target="_blank" href="#"><i class="lxkf"></i><em>官方客服</em></a></li>
	</ul>
</div>

CSS代码:

.gotop{position:fixed;top:50%;left:50%;margin-left:600px;z-index:10}
.gotop li a{display:block;width:50px;height:50px;border-bottom:1px solid #000;background-color:#333;color:#fff;line-height:15px;padding:10px;text-align:center}
.gotop li a.user{border:0}
.gotop li a i{line-height:31px;font-size:30px}
.gotop li a em{display:none}
.gotop li a:hover{background-color:#3398cc;color:#fff}
.gotop li a:hover i{display:none}
.gotop li a:hover em{display:block;font-style:normal}
.gotop .fhdb{background:#333 url(https://static.404v.com/images/gotop.png) -57px -5px no-repeat;background-size:97px}
.gotop .lxkf{border-top:0;background:#333 url(https://static.404v.com/images/goad.png) -45px 0 no-repeat;background-size:80px}
@media screen and (max-width:1198px){.gotop{top:50%;left:0;margin-left:80%}
}

自适应纯CSS版返回顶部代码,简易好学 说明:

使用方法:

首先第一步:找到你网站主题调用的CSS文件,实在找不到的,自行百度解决。

第二步:找到调用的CSS文件后,复制上面CSS代码,粘贴进去,即可。

第三步:复制HTML代码,粘贴到网站底部任意一个地方即可。

第三步:保存,看效果。

标签: 精品教程 代码教程

OUIMS博客广告

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~