jquery实现移动端页面加载后，向上滚动指定距离无效引起的探索

时间：2025-03-04 14:34:02

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

　　jquery实现移动端页面加载后，向上滚动指定距离无效引起的探索

　　最近一同事询问用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

　　

相关文章