网页上吊猫咪返回顶部代码增加客户体验!

发布时间:2021-01-08 作者:安阳博客网 所属分类:程序代码

话说我们浏览网页的时候经常会遇到一些篇幅较长的网页,一般这写网页多半为产品描述详情页、文章页面、较多项目的列表栏目页,当我们浏览完这些网页时想要回到顶部导航,通常需要不断的滚动鼠标中轮实在是非常麻烦,浪费了我们很多时间,而作为站长而言,这样显然影响网站的客户体验,因此需要对网页添加一个一键返回顶部代码,这样就不需要浪费时间滚动鼠标中轮了,这里我们来说一个非常好的创意返回顶部代码,一直上吊猫咪,当遇到篇幅较长的网页是上吊猫咪便会自动展开,点击则会快速的返回顶部,不仅方便了用户,同时也增添了许多趣味,着实增加客户体验!

该上吊猫咪返回顶部代码主要三个文件组成

CSS样式文件
szgotop.css
图片文件
scroll.png
JS文件
szgotop.js

将gotop文件夹上传至网站根目录,并在</head>之前引入szgotop.css文件.

<link rel="stylesheet" type="text/css" href="http://域名/gotop/css/szgotop.css" />

而后将以下代码放在</body>之前,保存后刷新网页看下当滚到网页底部时是不是就出现了一个上吊猫咪呢?点击猫咪便可返回网页顶部.

<div class="back-to-top cd-top faa-float animated cd-is-visible" style="top: -900px;" title="返回顶部"></div>
<script type="text/javascript">
$(function(){$(window).scroll(function(){var scroHei=$(window).scrollTop();if(scroHei>500){$(".back-to-top").css("top","-200px")}else{$(".back-to-top").css("top","-999px")}});$(".back-to-top").click(function(){$("body,html").animate({scrollTop:0},600)})});
</script>

为了加快网站速度,因此我们将JS文件展开并压缩直接放入网页文件.
文件下载地址:https://seocid.lanzous.com/itpRAk6p25i