江湖开发者 | Java粉
网站地图
首页> web前端> js返回顶部(仿百度)
2017
02-17

js返回顶部(仿百度)

js返回顶部(仿百度)

1.样式图片

totop.png

2.效果图

1.png2.png

3.代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style  type="text/css">
        .top-feed {
            visibility: hidden;
            position: fixed;
            left: 95%;
            width: 51px;
            bottom: 90px;
        }
        .top-feed .to-top {
            height: 26px;
            margin: 0 0 6px 10px;
        }
        .top-feed .to-top {
            position: relative;
            width: 38px;
            padding-top: 12px;
            border: 1px solid #e3e3e3;
            background-color: #fafafa;
            cursor: pointer;
        }
        .top-feed .icon-mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            height: 38px;
            line-height: 38px;
            width: 38px;
            z-index: 3;
            font-size: 13px;
            background-color: #eee;
            color: #999;
            margin-left: -1px;
            margin-top: -1px;
            border: 1px solid #e3e3e3;
        }
        .icon-mask .text {
            position: absolute;
            top: 4px;
            left: 6px;
            line-height: 16px;
            width: 30px;
        }
        .top-feed .to-top span {
            display: block;
            height: 17px;
            width: 33px;
            margin: 0 auto;
            background: url(style/images/totop.png) no-repeat -1px -10px;
        }
        .icon-over {
            display:block;
        }
        .top-feed:hover .icon-mask{
            display:block;
        }
    </style>
    <script>
        //返回顶部
 $("#s_top_feed").on("click",function(){
            window.scrollTo(0,0);
        })
    </script>
</head>
<body>
<!-- 返回顶部 -->
<div id="s_top_feed" class="top-feed">
    <div class="to-top" style="visibility: visible;">
        <div class="icon-mask">
            <div class="text"> 回到顶部 </div>
        </div>
        <span class="icon"></span>
    </div>
</div>
</body>
</html>


Java江湖     
全部评论:

表情验证码,看不清楚,换一张

随机文章

云标签

公众号

微信

分享:分享我们的知识;专注:专注个人技术的提升;