layui小固块

学习Layui工具栏的小固定块（实现返回顶部代码）

入门篇

//先引入layui的css文件
//在引入layui的js文件
<script>
layui.use(['util', 'laydate', 'layer'], function(){
  var util = layui.util
  ,laydate = layui.laydate
  ,layer = layui.layer;
  //固定块
  util.fixbar({
    bar1: true
    ,css: {right: 50, bottom: 100}
    ,bgcolor: '#393D49'
    ,click: function(type){
      if(type === 'bar1'){
        layer.msg('icon是可以随便换的')
      }
    }
  });
});
</script>

可以看到比较短的代码就可以实现在右下角固定图标的显示，并且不需要写任何html代码

//增加html代码
<div style="height: 1200px;">div>

于是增加了长度可以往下拉，实现返回顶部功能

但是

一下拉发现layui自己设定了一个“返回顶部”的图标

功能完全可以实现，但是，如果你只想要一个向上的图标，就要用下面的代码

原本还想着要自己写js代码的，以下是额外自己想写一个实现返回顶部功能的js代码
1.获得屏幕向下拉了多少的长
2.如果超过了某个值，图标显示并且点击图标时可以实现返回顶部

//html代码
<div style="height: 1200px;">div>
    <ul class="layui-fixbar">
        <li class="layui-icon layui-fixbar-top" lay-type="top" style="background-color: rgb(0, 150, 136); display: list-item;" id="scrolltop" >li>
    ul>

//js代码
//记得引入jQuery的js文件和layui的js文件
<script type='text/javascript'>
      layui.use(['util','layer','element'], function(){
          var util = layui.util;
          var layer = layui.layer;
          var element = layui.element;
      });
      //右下角回到顶部功能函数实现
      $(document).ready(function(){  
        $("#scrolltop").hide();  
        $(function () {  
        //设置高度  
        var height=100;  
        //scroll() 方法为滚动事件  
        $(window).scroll(function(){  
            if ($(window).scrollTop()>height){  
                $("#scrolltop").fadeIn(500); 
            }else{  
                $("#scrolltop").fadeOut(500); 
            }  
        });
        $("#scrolltop").click(function(){  
            $('body,html').animate({scrollTop:0},100);  //animate为动画效果，第二个参数是时间，单位ms
            return false;  
        });
    });  
 });
</script>

注意要把layui全部文件放在与代码一起的文件夹里，要不然有些功能不实现