关闭

实现回到顶部功能

标签: JQueryscrollbackground-position
168人阅读 评论(0) 收藏 举报
分类:

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">参考实现demo : </span><a target=_blank href="http://www.cnblogs.com/beyondfengyu/archive/2013/03/28/2987823.html" target="_blank" style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">jQuery实现回到顶部功能</a>

利用jQuery实现回到顶部功能,主要是用到了元素的定位属性(scrolltop等),参考文章 :JQuery Div scrollTop ScrollHeight

另一方面也学习了从background-position的方法(抠图),参考文章 : CSS从大图中抠取小图完整教程(background-position应用)

1.html页面代码

<body>
    <div class="gotoTop"></div>
    <h1>Testing div Demo: GO TO TOP!</h1>
    <div class="container">
       噼里啪啦一段大段文字,可以放一片自己喜欢的散文,吼吼哈。。
    </div>
</body>
2.css代码

<style>
    body{
        padding:0;
        background-color:#aaa;
    }
    .container{
        margin-left: 50px;
        margin-right: 50px;

        background-color: #fff;
        color:#c0c0c0;
        font-size:18px;
        letter-spacing: 4px;

        padding:10px;
        border-radius: 10px;
    }
    .gotoTop{
        display: none;
        position: fixed;
        right: 10px;
        bottom: 10px;

        width:50px;
        height:50px;

        background: #fff url(img/goTopOne.png) -70px 0;
    }
    .gotoTop:hover{
        background: #fff url(img/goTopOne.png) 0 0;
    }
</style>
3.js代码

<script>
    function gotoTop(){
        console.log("come in function gotoTop.");
        $(window).scroll(function(){
            console.log("scroll function.");
            if($(window).scrollTop() >100){
                $(".gotoTop").fadeIn(500);
            }else{
                $(".gotoTop").fadeOut(500);
            }
        });
    }

    $(function(){

        $(".gotoTop").click(function(){
            $('body,html').animate({scrollTop:0}, 1000);
        });

        gotoTop();
    });
</script>




0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:618次
    • 积分:29
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:1篇
    • 译文:1篇
    • 评论:0条
    文章分类
    文章存档