tnblog
首页

实现返回顶部效果

439人阅读 2018/12/25 22:15 评论:0 收藏
分类: CSS


实现的效果如下



 可以点击它返回到首页去



html部分

<ul class="layui-fixbar" style="right: 50px; bottom: 50px;">
  <li class="layui-icon layui-fixbar-top" id="to_top" style="background-color: rgb(57, 61, 73);"
   title="返回顶部"></li>
</ul>


css部分

 <style type="text/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;
        }
    </style>

注意那个箭头不是使用的图标,而是使用的一个字体样式(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();
            }
        });





请先登录

{{item.title}}

{{item.content}}
不能简单的解决问题,那是设计与做法有问题
博主搜索
文章类别
CSS 5篇
云服务 2篇
Git 4篇
.NET 29篇
Android 0篇
软件架构 4篇
.NET Core 15篇
.NET MVC 3篇
英语 3篇
随笔 3篇
Bootstrap 1篇
Redis 12篇
编辑器 2篇
Js相关 6篇
Layui 2篇
Oracle 7篇
Python 2篇
数据库 2篇
EF 2篇
微信 2篇
前端 1篇
消息队列 1篇
最新文章
为什么要使用webapi而不直接使用controller
net core发布到IIS常见错误
net core依赖注入
NET CORE配置EF连接字符串
Net Core使用依赖注入来装载EF的上下文对象
下载net core
Sqlerver添加用户与授权
net core中使用url编码与解码操作
net core启动报错Unable to configure HTTPS endpoint. No server certificate was specified
.net core使用response
ef6动态添加条件
最新评价
{{item.ArticleTitle}}
{{item.BlogName}} : {{item.Content}}