实现返回顶部效果

实现返回顶部效果2： http://www.tnblog.net/aojiancc2/article/details/2677

实现的效果如下

 可以点击它返回到首页去

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();
            }
        });