首先贴出CSS部分:
<style type="text/css">
.fix_bar{
position: fixed;
right: 15px;
bottom: 15px;
z-index: 9999;
cursor: pointer;
}
.layui-fixbar-top{
font-size: 35px;
background-color: rgba(0,0,0,.3);
cursor: pointer;
}
.layui-fixbar-down{
font-size: 35px;
background-color: rgba(0,0,0,.3);
cursor: pointer;
}
</style>
页面部分:
<ul class="fix_bar"> <li class="layui-icon layui-fixbar-top" id="to_top" title="返回顶部">顶部图标</li> <li class="layui-icon layui-fixbar-down" id="to_bottom" title="去底部">底部图标</li> </ul>
javascript部分:
//回到顶部 $("#to_top").click(function() { $("html,body").animate({scrollTop:0}, 200); }); $(document).scroll(function(){ var scroll_top = $(document).scrollTop(); if(scroll_top > 800){ $("#to_top").show(); }else{ $("#to_top").hide(); } }); //去底部 $("#to_bottom").click(function() { $("html,body").animate({scrollTop:document.body.clientHeight + 'px'}, 200); }); $(document).scroll(function(){ var scroll_top = $(document).scrollTop(); if(scroll_top < 800){ $("#to_bottom").show(); }else{ $("#to_bottom").hide(); } });
其实自己写一份也很容易,只是后端开发还是怕麻烦,直接用比较省力哈。喜欢就拿走吧,别忘了顶一下。