实现的效果如下
可以点击它返回到首页去
html部分
title="返回顶部">
css部分
.layui-fixbar{
position:fixed;
right:15px;
bottom:15px;
z-index:999999;
right:50px;
bottom:50px;
height:50px;
list-style:none;
}
.layui-fixbar.layui-fixbar-top{
display:none;
font-size:40px;
}
.layui-fixbarli{
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;
}
.layui-icon{
font-family:layui-icon!important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing:antialiased;
}
注意那个箭头不是使用的图标，而是使用的一个字体样式(layui-icon)去实现的
主要是如下下面的代码:.layui-icon{
font-family:layui-icon!important;
}
当然如果你想要使用这个字体样式需要先引入一下这个字体@font-face{
font-family:layui-icon;
src:url(../font/iconfont.eot?v=240);
src:url(../font/iconfont.eot?v=240#iefix)format('embedded-opentype'),url(../font/iconfont.svg?v=240#iconfont)format('svg'),url(../font/iconfont.woff?v=240)format('woff'),url(../font/iconfont.ttf?v=240)format('truetype');
}
字体就是Layui里边的，网上下载即可：
js部分//回到顶部
$("#to_top").click(function(){
$("html,body").animate({scrollTop:0},200);
});
$(document).scroll(function(){
varscroll_top=$(document).scrollTop();
//高度多少出现返回顶部，可以随意调整
if(scroll_top>600){
$("#to_top").show();
}else{
$("#to_top").hide();
}
});
欢迎加群讨论技术，群号：677373950
