サマリー：本次實(shí)戰(zhàn)主要完成頁(yè)面返回頂部的功能，通過(guò)引用layui的字體庫(kù)引進(jìn)返回頂部的標(biāo)簽，并通過(guò)頂部添加a標(biāo)簽的name屬性，再通過(guò)標(biāo)簽的href等于頂部a標(biāo)簽的name的形式實(shí)現(xiàn)返回頂部。返回頂部標(biāo)簽的顯示和隱藏則通過(guò)判斷頁(yè)面的滾動(dòng)高度進(jìn)行顯示和隱藏。代碼如下：<!DOCTYPE html> <html> <head
本次實(shí)戰(zhàn)主要完成頁(yè)面返回頂部的功能，通過(guò)引用layui的字體庫(kù)引進(jìn)返回頂部的標(biāo)簽，并通過(guò)頂部添加a標(biāo)簽的name屬性，再通過(guò)標(biāo)簽的href等于頂部a標(biāo)簽的name的形式實(shí)現(xiàn)返回頂部。返回頂部標(biāo)簽的顯示和隱藏則通過(guò)判斷頁(yè)面的滾動(dòng)高度進(jìn)行顯示和隱藏。代碼如下：
<!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>
添削の先生：韋小寶添削時(shí)間：2018-11-20 11:59:24
先生のまとめ：不錯(cuò)不錯(cuò)！寫(xiě)的很棒棒！回到頂部這個(gè)小功能基本上所有網(wǎng)頁(yè)中都有用到哦！