abstract：本次實戰(zhàn)主要完成頁面返回頂部的功能，通過引用layui的字體庫引進返回頂部的標(biāo)簽，并通過頂部添加a標(biāo)簽的name屬性，再通過標(biāo)簽的href等于頂部a標(biāo)簽的name的形式實現(xiàn)返回頂部。返回頂部標(biāo)簽的顯示和隱藏則通過判斷頁面的滾動高度進行顯示和隱藏。代碼如下：<!DOCTYPE html> <html> <head
本次實戰(zhàn)主要完成頁面返回頂部的功能，通過引用layui的字體庫引進返回頂部的標(biāo)簽，并通過頂部添加a標(biāo)簽的name屬性，再通過標(biāo)簽的href等于頂部a標(biāo)簽的name的形式實現(xiàn)返回頂部。返回頂部標(biāo)簽的顯示和隱藏則通過判斷頁面的滾動高度進行顯示和隱藏。代碼如下：
<!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>
Correcting teacher：韋小寶Correction time：2018-11-20 11:59:24
Teacher's summary：不錯不錯！寫的很棒棒！回到頂部這個小功能基本上所有網(wǎng)頁中都有用到哦！