大家好，又见面了，我是你们的朋友全栈君。
实现的效果如下
可以点击它返回到首页去
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-fixbar 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;
}
.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 () {
var scroll_top = $(document).scrollTop();
//高度多少出现返回顶部，可以随意调整
if (scroll_top > 600) {
$(“#to_top”).show();
} else {
$(“#to_top”).hide();
}
});
欢迎加群讨论技术，群号：677373950
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/158388.html原文链接：https://javaforall.net
