jquery返回顶部

最新推荐文章于 2022-03-07 09:57:01 发布

含笑一过

最新推荐文章于 2022-03-07 09:57:01 发布

阅读量413

点赞数

分类专栏：前端文章标签：返回顶部

本文链接：https://blog.csdn.net/u013630488/article/details/49870603

版权

前端专栏收录该内容

51 篇文章 0 订阅

订阅专栏

                                        **jquery返回顶部**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <style type="text/css">
        #content{width: 500px;margin: 30px auto;height: 3000px;}
        #content a{float: right;right: 10px;bottom: 100px;position: fixed;background: url(backTop.png) no-repeat;width: 60px;height: 60px;}
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#returnBack").hide();
            $(window).scroll(function(){
                if($(window).scrollTop()>100){
                    $("#returnBack").fadeIn(800);
                }else{
                    $("#returnBack").fadeOut(800);
                }
            })
            $("#returnBack").click(function() {
                 $(document.body).animate({scrollTop: 100}, 800);
                 return false;
            }); 
        })

    </script>
</head>
<body>
    <div id="content">
        <a href="javascript:;" id="returnBack" alt="返回顶部"></a>
    </div>
</body>
</html>

修复ie、火狐兼容问题
将
$(document.body).animate({scrollTop: 100}, 800); 改为：$ (‘body,html’).animate({scrollTop: 100}, 800);
如果在下载源码的过程中遇到这个bug，希望看到这个日志后能自动去修改源码中的bug
效果图：
这里写图片描述
源码下载地址：http://pan.baidu.com/s/1eQfQPfs