layui提供的固定块功能,语法:util.fixbar(options),默认只有2个图标,如果需要2个以上的图标,可以自己去写
式样代码
<style>
.custom-footer {
position: fixed;
right: 15px;
bottom: 15px;
z-index: 999999;
}
.custom-footer li {
width: 50px;
height: 50px;
line-height: 50px;
margin-bottom: 1px;
text-align: center;
cursor: pointer;
font-size: 30px;
background-color: #9f9f9f;
color: #fff;
border-radius: 2px;
opacity: .95;
}
</style>
网页代码
!!!<ul class="custom-footer">
<li class="layui-icon" style="background-color:rgba(0,0,0,0.2)">

</li>
<li class="layui-icon" style="background-color:rgba(0,0,0,0.2)">

</li>
<li class="layui-icon" id="top" style="background-color: rgba(0, 0, 0, 0.2); display: none;" onclick="topFunction()">

</li>
</ul>!!!
JS代码
<script>
// 当网页向下滑动 200px 出现"返回顶部" 按钮
window.onscroll = function() {scrollFunction()};
function scrollFunction() {console.log(121);
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
document.getElementById("top").style.display = "block";
} else {
document.getElementById("top").style.display = "none";
}
}
// 点击按钮,返回顶部
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>