对应的知识点铺垫,但是有一个很重要的问题就是兼容IE和chorme的

1. scrollTop():
读取/设置滚动条的Y坐标
2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
读取页面滚动条的Y坐标(兼容chrome和IE)
3. $('body,html').scrollTop(60);
滚动到指定位置(兼容chrome和IE)

需求:

1. 得到div或页面滚动条的坐标
2. 让div或页面的滚动条滚动到指定位置

  1. $("#btn1").click(function(){
  2. console.log($("div").scrollTop());
  3. //在chrome的话,直接body就可以,但是ie不可以,直接html的话,IE可以,chorme不可以。两者不一样,所以为了兼容两者,就进行把两者相加即可
  4. //
  5. console.log($("html").scrollTop()+$("body").scrollTop())
  6. //但是下面这个效率更高,因为直接就可以获取到
  7. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
  8. });
  9. // 2. 让div或页面的滚动条滚动到指定位置
  10. $("#btn2").click(function(){
  11. console.log($("div").scrollTop(300));
  12. //w为了两个有效果必须要使用两个,保证两种浏览器都有效果
  13. console.log($("html,body").scrollTop(300));
  14.  
  15. });

jQuery之_元素滚动的更多相关文章

  1. Jquery实现图片左右滚动(自动)

    <!DOCTYPE HTML><html><head><title>基于jQuery的控制左右滚动效果_自动滚动版本</title>< ...

  2. Jquery 实现banner图滚动效果

    html代码: <div id="focus"> <ul> <li><p>禅的修行应要无欲无求1</p><a hr ...

  3. h5之scrollIntoView控制页面元素滚动

    如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法 ...

  4. 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决

    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...

  5. 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js

    1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...

  6. jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解

    jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...

  7. jQuery如何判断元素是否是隐藏的?

    jQuery函数简介: is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true. 如果没有元素符合,或者表达式无效,都返回'false'. 注 ...

  8. 用jQuery判断一个元素的各种状态

    用jQuery判断一个元素是否显示   用jQuery判断一个元素是否显示:$(element).is(":visible"); 类似的,判断一个元素是不是第一个子元素:$(ele ...

  9. jQuery检查某个元素在页面上是否存在

    用jQuery检查某个元素在网页上是否存在时,应该根据获取元素的长度来判断,代码如下: if($("#tt").length > 0) { //元素存在时执行的代码 } 具体 ...

随机推荐

  1. c#开发微信公众号——关于c#对象与xml的转换

    在成为微信公众号开发者以后,整个交互流程:用户->微信服务器->自己的服务器->返回微信服务器->用户: 举个例子:用户在微信公众号里面发了个“您好!”,微信服务器会以特定的x ...

  2. Flume(5)-Ganglia监控

    一. 安装Ganglia 1. 安装httpd服务与php sudo yum -y install httpd php 2. 安装其他依赖 sudo yum -y install rrdtool pe ...

  3. 分布式日志收集框架Flume

    分布式日志收集框架Flume 1.业务现状分析 WebServer/ApplicationServer分散在各个机器上 想在大数据平台Hadoop进行统计分析 日志如何收集到Hadoop平台上 解决方 ...

  4. aircrack-ng 破解无线网络

    1.科普当今时代,wifi 已成为我们不可缺少的一部分,上网.看视频.玩游戏,没有 wifi 你就等着交高额的流量费吧,本来我想单独的写 wpa 破解和 wps 破解,后来觉得分开写过于繁琐,索性合并 ...

  5. ubuntu系统部署python3.6.4

    Ubuntu的版本为16.04,系统自带的Python版本较低,使用亲本版本3.6.4,下为安装步骤: 一.官网下载Python3.6.4版本 新建目录: sudo mkidr /usr/local/ ...

  6. 【Mac】解决「另一个活跃的 Homebrew 进程正在进行中」问题

    问题描述 在安装 tesseract 的语言包时,由于网络下载速度太慢,我按下 ctrl + z 退出了安装,当再次输入安装命令时,系统报错如下: 解决方法 使用以下命令删除 homebrew 进程锁 ...

  7. 002---Redis

    主从复制 主节点负责写数据.从节点负责读数据.主节点定期将数据同步到从节点,从而保证数据的一致性. 一主一从 一主多从 针对"读"较多的场景,"读"由多个从节点 ...

  8. 验证码生成工具——Jcaptcha

    <dependency> <groupId>com.octo.captcha</groupId> <artifactId>jcaptcha</ar ...

  9. java class file

    目录 什么是java类文件 幻数 主次版本号 常量池数和常量池 this_class super_class 接口数量和接口 字段数和字段 方法数和方法 以下内容主要还是参考<Inside JV ...

  10. python爬取斗图网中的 “最新套图”和“最新表情”

    1.分析斗图网 斗图网地址:http://www.doutula.com 网站的顶部有这两个部分: 先分析“最新套图” 发现地址栏变成了这个链接,我们在点击第二页 可见,每一页的地址栏只有后面的pag ...