实现回到顶部功能

最新推荐文章于 2021-05-18 08:40:19 发布

Ohh_Hq_On

最新推荐文章于 2021-05-18 08:40:19 发布

阅读量436

点赞数

分类专栏：前端文章标签： JQuery scroll background-position

本文链接：https://blog.csdn.net/HQisagirl/article/details/49891767

版权

前端专栏收录该内容

2 篇文章 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>

Ohh_Hq_On

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现回到顶部功能

参考实现demo : jQuery实现回到顶部功能利用jQuery实现回到顶部功能，主要是用到了元素的定位属性（scrolltop等），参考文章：JQuery Div scrollTop ScrollHeight另一方面也学习了从background-position的方法（抠图），参考文章 : CSS从大图中抠取小图完整教程(background-position应用)1.html
复制链接

扫一扫