首先贴出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();
}
});
其实自己写一份也很容易,只是后端开发还是怕麻烦,直接用比较省力哈。喜欢就拿走吧,别忘了顶一下。
转载于:https://www.cnblogs.com/phper12580/p/9649808.html