摘要：本次实战主要完成页面返回顶部的功能，通过引用layui的字体库引进返回顶部的标签，并通过顶部添加a标签的name属性，再通过标签的href等于顶部a标签的name的形式实现返回顶部。返回顶部标签的显示和隐藏则通过判断页面的滚动高度进行显示和隐藏。代码如下：<!DOCTYPE html> <html> <head
本次实战主要完成页面返回顶部的功能，通过引用layui的字体库引进返回顶部的标签，并通过顶部添加a标签的name属性，再通过标签的href等于顶部a标签的name的形式实现返回顶部。返回顶部标签的显示和隐藏则通过判断页面的滚动高度进行显示和隐藏。代码如下：
<!DOCTYPE html>
<html>
<head>
<title>返回顶部</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="static/layui/css/layui.css">
<script type="text/javascript" src="static/js/jquery.js"></script>
<script>
$(function(){
$(".layui-fixbar").hide();
$(window).scroll(function(){
if($(window).scrollTop()>100)
{
$(".layui-fixbar").show();
}else{
$(".layui-fixbar").hide();
}
})
});
</script>
</head>
<body>
<a name="toTop"></a>
<div style="background:#ccc;width:100%;height:1500px;"></div>
<a href="#toTop">
<ul class="layui-fixbar" style="position: fixed;bottom: 50px;right: 30px;">
<li class="layui-icon layui-fixbar-top" lay-type="top" style="display: list-item;"></li>
</ul>
</a>
</body>
</html>
批改老师：韦小宝批改时间：2018-11-20 11:59:24
老师总结：不错不错！写的很棒棒！回到顶部这个小功能基本上所有网页中都有用到哦！
