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
jquery实现移动端页面加载后，向上滚动指定距离无效引起的探索的更多相关文章
- JQuery浮动层Loading页面加载特效
之前做项目,经常需要一些浮动层加载Loading. 现在好多前端框架都能实现了,最常用的就是 artDialog 下面记录下当时的代码. <!DOCTYPE html PUBLIC " ...
- 页面加载后累加，自加1&&判断数字是否为两位数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery 页面加载后执行的事件(3 种方式)
刚刚工作,没怎么用过 jQuery.今天在工作中遇到一个 jQuery 问题,页面加载的时候需要触发函数,第一直觉告诉我应该写成 onload(),结果不是.后来查了文档发现是 load(),但是版本 ...
- 在页面加载后在设置embed 的src 怎么实现？
我想在页面加载完之后,再给embed 加入src 值,但embed 后播放不了.下面是我的两个方案,都无法播放,求解: <script type="text/javascript&qu ...
- 从零开始学 Web 之 jQuery（一）jQuery的概念，页面加载事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- jQuery Mobile中的页面加载与跳转机制
第一次做用jQuery Mobile做东西,发现一些跟平时的思维习惯不太一样的.其中这个框架的页面加载机制便是其中一个.如果不明白其中的奥秘,往往会出现一些让人摸不着头脑的怪现象,比如页面进入后点击按 ...
- 页面加载后resize页面布局
在我们写web的时候,有的时候页面加载完以后,布局位置有一些问题,手动改变窗口大小后则正常显示位置. 其实,我们手动改变窗口大小,是执行了resize方法. share一下兼容方法: coffee c ...
- JQuery的几种页面加载完执行三种方式
jquery加载页面的方法(页面加载完成就执行) 1. $(function(){ $("#a").click(function(){ //adding your code h ...
- Jquery 在页面加载后执行的几种方式
1.$(function(){ $("#a").click(function(){ //adding your code here }); }); 2.$(document) ...
随机推荐
- jQuery 源码分析(十一) 队列模块 Queue详解
队列是常用的数据结构之一,只允许在表的前端(队头)进行删除操作(出队),在表的后端(队尾)进行插入操作(入队).特点是先进先出,最先插入的元素最先被删除. 在jQuery内部,队列模块为动画模块提供基 ...
- 面试必问的Spring IOC详解
广义的 IOC IoC(Inversion of Control) 控制反转,即“不用打电话过来,我们会打给你”. 两种实现: 依赖查找(DL)和依赖注入(DI). IOC 和 DI .DL 的关系( ...
- 使用celery执行Django串行异步任务
Django项目有一个耗时较长的update过程,希望在接到请求运行update过程的时候,Django应用仍能正常处理其他的请求,并且update过程要求不能并行,也不能漏掉任何一个请求 使用cel ...
- [算法]LeetCode 152：乘积最大子序列
题目描述: 给定一个整数数组 nums ,找出一个序列中乘积最大的连续子序列(该序列至少包含一个数). 示例 1: 输入: [2,3,-2,4]输出: 6解释: 子数组 [2,3] 有最大乘积 6.示 ...
- ZooKeeper（二）：多个端口监听的建立逻辑解析
ZooKeeper 作为优秀的分布系统协调组件,值得一探究竟.它的启动类主要为: 1. 单机版的zk 使用 ZooKeeperServerMain 2. 集群版的zk 使用 QuorumPeerMai ...
- vue-品牌管理案例-指令和过滤器
过滤器的基本使用 定义一个过滤器 <div id="app"> <p>{{ msg | msgFormat('疯狂+1', '123') | test }} ...
- django实现客户端文件下载
基于django项目,由于不是专门讲文件的下载,这里仅是项目需要,所以可能不是特别的详细.仅做流程的演示: 实现过程: 1.准备下载url # 下载文件 url(r'^download_file/$' ...
- Python【day 17】面向对象-成员
类的变量分成2种: 1.成员变量 概念:在构造方法中的变量,前面带有self 作用:可以在类中不同的方法间使用 2.类变量-静态变量 概念:在类中,构造方法和普通方法之外,定义的变量 作用: 1.调用 ...
- SpringBoot（四） SpringBoot整合JdbcTemplate
一.数据准备CREATE TABLE `tb_user` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID', `username` varchar ...
- django3-视图函数进阶
1.视图函数的分类 FBV(fucntion base view) CBV(class base view) ,CBV根据定义的方法名 ,判断什么请求执行什么函数 2.FBV转换CBV (不太对劲) ...