css实现返回顶部,实现返回顶部效果

大家好，又见面了，我是你们的朋友全栈君。

实现的效果如下

644c9d0ea00223897c717b04f4a5a8aa.png

可以点击它返回到首页去

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里边的，网上下载即可：

1d0a9bd2f321ce46ddc0399233d6dbe9.png

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.cn/158388.html原文链接：https://javaforall.cn