返回顶部功能实战总结
本次实战主要完成页面返回顶部的功能，通过引用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>