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

css实现返回顶部,实现返回顶部效果实现的效果如下可以点击它返回到首页去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-fixba…

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

实现的效果如下

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158388.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 计算机网络————IP地址分类以及网络地址的计算[通俗易懂]

    计算机网络————IP地址分类以及网络地址的计算[通俗易懂]一,IP地址分类 1.二进制与十进制的关系 2,IP地址的地址结构及分类IP地址结构:网络号+主机号网络号:中主机中指明中的所在物理网络的编号主机号:中中中主机在物理网络中的编号 IP地址分类:A类(大型),B类(中型),C类(小型),D类(组播),E类(保留地址-研究时使用) A类地址默认掩码:255.0.0.0/8B类地址默认掩码:2…

  • Windows定时关机[通俗易懂]

    Windows定时关机[通俗易懂]1.首先将鼠标已到左面的左下角(开始菜单),右击后选择“计算机管理”,出现下图2.点击“任务计划程序”,然后在右边点击“创建基本任务”,随便填写个任务名称,比如定时关机,完了点击下一步3.选择“一次”,点击下一步4.设置开始时间,点击下一步5.选择“启动程序”,点击下一步6.程序或脚本那里输入“shutdown”,添加参数那里输入“/s”7.最后点击完成

  • zip文件后缀改成什么可以用_zip格式转rar格式

    zip文件后缀改成什么可以用_zip格式转rar格式案例2,批量修改文件扩展名\后缀名1上面介绍的是只修改某一类的后缀名,那么如果我整个文件夹下面的所有类型的文件都要修改怎么办呢?如下图什么类型的文件都有呢【强烈推荐】如何批量修改文件后缀名?超详细2其实也很简单,只需要修改一个参数就好了。如下图找到刚刚那个bat文件,右键编辑–或者用记事本打开。(注意:在*之前有一个英文的空格把命令改成,ren.*.gif  格式 ren空格星点星空格星点文件后缀名【强烈推荐】如何批量修改文件后缀名?超详细【强烈推荐】如何批

    2022年10月12日
  • java list 转json 字符串_fastjson将java list转为json字符串

    java list 转json 字符串_fastjson将java list转为json字符串1.直接用fastjson的静态方法stringJSON.toJSONString(list)方法就行,JSON.toJSONString(list)将javalist转为json字符串。2.toJsonString()方法,有两个重载,一个是JSON.toJsonString(list),直接将list转为json字符串:[{\”aid\”:10056,\”content_text\”:\”…

    2022年10月18日
  • 45天带你玩转Node(第二天)走进Node.js「建议收藏」

    45天带你玩转Node(第二天)走进Node.js「建议收藏」粉丝要求博主系统的写一篇关于Node.js的学习资料,但其实我们的Node.js知识点并不少,所以博主为大家搭建了一个专栏,为了方便大家系统的学习Node.js,大家记得订阅哦!虽然我们的Node.js还很年轻,但是他也已经有了很高的地位,让我们尽情的畅游在Node.js的专栏中吧,希望通过此专栏我们能够系统的将Node.js学好,它将会成为我们的一大亮点,我们可以用这款前端中的后端语言让提升我们的价值与眼界,如今的他也已经成为面试官口中的高并发面试内容了,一起加油!

  • (修改gho文件办法)做属于自己个性的gho系统

    (修改gho文件办法)做属于自己个性的gho系统(修改gho文件办法)做属于自己个性的gho系统一修改GHO文件中的注册表:想要修改注册表首先要知道XP系统注册表存放的位置:WindowsXP的绝大部分注册表数据文件存放在C:\WINDOWS\system32\config。该目录里面包含了5个没有扩展名的文件,即当前注册表文件:  DEFAULT(默认注册表文件,位于注册表的HKEY_USERS项分支下…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号