效果如下，页面加载完后向上滚动一段距离

　　

 

　　最近一同事询问用jquery为何无法实现上面效果，查看代码后发现代码并没写错，

　  也正确引入了zepto.js，也不是版本问题（因为是移动端项目，出于性能和需求的考虑没有引入jquery.js）

　  后经测试发现要实现上面效果不能引用zepto.js，而要使用jquery.js

 

　  那为何会这样呢？这个问题就涉及到二者的区别

　 zepto是jquery的精简版，针对移动端去除了大量jQuery的兼容代码，部分API使用不同，主要用于移动端，jquery主要用于PC端

　 详见：https://www.zhihu.com/question/25379207

 

　 Demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <style>
            html,body {
                margin: 0;
                padding: 0;
            }
            .test1 {
                color: #fff;
                font-size: 30px;
                font-weight: bold;
                background-color: #000;
            }
            .test2 {
                width: 100%;
                height: 800px;
                line-height: 800px;
                text-align: center;
            }
        </style>
    </head>
    <body class="test1">
        
        <div class="test2">向上滚动</div>
        
        <!--<script src="https://cdn.staticfile.org/zepto/1.0rc1/zepto.min.js"></script>-->
        <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(function(){
                $("html,body").animate({scrollTop:100}, 1000)
            })
        </script>
    </body>
</html>

　　补充：上面效果还可以用JS和CSS3 animation动画实现，以前写过一篇博文，如下

　　　　　https://www.cnblogs.com/tu-0718/p/10111477.html

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点