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

　　

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

　　

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

  1. JQuery浮动层Loading页面加载特效

    之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...

  2. 页面加载后累加，自加1&&判断数字是否为两位数

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery 页面加载后执行的事件(3 种方式)

    刚刚工作,没怎么用过 jQuery.今天在工作中遇到一个 jQuery 问题,页面加载的时候需要触发函数,第一直觉告诉我应该写成 onload(),结果不是.后来查了文档发现是 load(),但是版本 ...

  4. 在页面加载后在设置embed 的src 怎么实现？

    我想在页面加载完之后,再给embed 加入src 值,但embed 后播放不了.下面是我的两个方案,都无法播放,求解: <script type="text/javascript&qu ...

  5. 从零开始学 Web 之 jQuery（一）jQuery的概念，页面加载事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. jQuery Mobile中的页面加载与跳转机制

    第一次做用jQuery Mobile做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...

  7. 页面加载后resize页面布局

    在我们写web的时候,有的时候页面加载完以后,布局位置有一些问题,手动改变窗口大小后则正常显示位置. 其实,我们手动改变窗口大小,是执行了resize方法. share一下兼容方法: coffee c ...

  8. JQuery的几种页面加载完执行三种方式

      jquery加载页面的方法(页面加载完成就执行) 1. $(function(){ $("#a").click(function(){ //adding your code h ...

  9. Jquery 在页面加载后执行的几种方式

    1.$(function(){  $("#a").click(function(){  //adding your code here  }); }); 2.$(document) ...

随机推荐

  1. mysql数据库的十种查询方式及多表查询

    --mysql数据库的十种查询方式 -- (1)查询时起别名 SELECT id AS '编号',NAME AS '姓名',age AS '年龄' FROM student; -- (2)查询时添加常 ...

  2. C++ delete 和 delete []的区别

    转载自https://blog.csdn.net/cbNotes/article/details/38900799 1.我们通常从教科书上看到这样的说明:delete 释放new分配的单个对象指针指向 ...

  3. Java匹马行天下之学编程的起点——编程常识知多少

    学编程的起点——编程常识知多少 前言: 刚去大学那会,我就知道我被录取的学院是软件学院,还知道一点就是软件学院主要是学电脑的,但具体要学什么其实一无所知.待的时间久了,慢慢的,像“编程”.“软件”.“ ...

  4. `protected` vs `private`

    private 标识为 private 的属性为私有属性,不能在除自己外的地方进行访问. protected 标识为 protected 的属性为受保护的属性,与私有属性类似,但还可以在继承类中进行访 ...

  5. git clone: HTTP Basic: Access denied 错误

    git clone 报 HTTP Basic: Access denied 错误 解决方案: 1. 如果账号密码有变动 用这个命令 git config –-system –-unset creden ...

  6. Linux问题记录——主机名变成了bogon

    Linux问题记录——主机名变成了bogon 摘要:本文主要记录了主机名变成bogon的原因以及解决办法. 问题重现 主机名在一次登录后,变成了bogon,此后每次登录Linux系统时都是bogon. ...

  7. 缓存cache（擦车）

    第一次接触到Cache的时候,是在WebForm中,第一次接触,我就再也没能忘记,cache(擦车,的拼音) 客户端浏览器缓存https://blog.csdn.net/y874961524/arti ...

  8. TCP/IP：完全弄清OSI七层模型

    OSI七层背景概述 诞生于1983年,iso(国际标准委员会)设计并推出. 目的:实现网络行业的兼容性 OSI七层模型与TCP/IP相对应的层次: 一般来说,我们把上三层被称为应用层,下四层被称为数据 ...

  9. Xcode模拟器无法启动解决办法

    今天遇到模拟器无法启动问题,点击模拟器或者Xcode build模拟器就一直跳,跳一会就不跳了,然后查看模拟器状态,显示为无响应.或者黑屏,等半天不动. 如果你有类似情况可以尝试在终端执行以下命令: ...

  10. scanf函数和cin的区别、类的数组、C++排序函数

    给定n个字符串,将这n个字符串按照字典序进行排列,此处用排列函数是C++的库函数sort,产生如下两个疑问,望大佬解答 #include <iostream> #include <a ...