对应的知识点铺垫,但是有一个很重要的问题就是兼容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或页面的滚动条滚动到指定位置

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

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. 笔记(assert 断言)

    并发:在同一个时间段交替执行多个任务并行:在同一个时间点同时执行多个任务串行:同时执行的多个任务按顺序执行(换句话说就是一个任务执行完后才能执行下一个任务) #mysql limit用法: selec ...

  2. golang 错误处理与异常

    原文地址 golang 中的错误处理的哲学和 C 语言一样,函数通过返回错误类型(error)或者 bool 类型(不需要区分多种错误状态时)表明函数的执行结果,调用检查返回的错误类型值是否是 nil ...

  3. 20155234java实验一

    实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验要求 1.没有Linux基础的同学建议先学习Linux基础入门(新版))Vim ...

  4. 20155235 《Java程序设计》 实验五 Java网络编程及安全

    20155235 <Java程序设计> 实验五 Java网络编程及安全 实验内容 1.掌握Socket程序的编写: 2.掌握密码技术的使用: 3.设计安全传输系统. 实验要求 没有Linu ...

  5. 【转载】3D/2D中的D3DXMatrixPerspectiveFovLH和D3DXMatrixOrthoLH投影函数详解

    原文:3D/2D中的D3DXMatrixPerspectiveFovLH和D3DXMatrixOrthoLH投影函数详解 3D中z值会影响屏幕坐标系到世界坐标系之间的转换,2D中Z值不会产生影响(而只 ...

  6. Android 学习1

    使用eclipse做为开发IDE, 导包快捷键 在显红的地方按shift+ctrl+o 另外自动补全使用alt+/

  7. 简单读取 properties文件

    看了网上很多读取的方法,都太过复杂,直接使用下面的方法就可以简单读取 properties文件了 ide使用idea 测试读取成功 import java.util.ResourceBundle; p ...

  8. javaweb(二十三)——jsp自定义标签开发入门

    一.自定义标签的作用 自定义标签主要用于移除Jsp页面中的java代码. 二.自定义标签开发和使用 2.1.自定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 1 packag ...

  9. linux安装PHP-memcache-redis扩展

    1.php memcache 扩展 http://pecl.php.net/package/memcache/3.0.8 下载文件源码 #tar zxvf memcache-3.0.8.tar#/us ...

  10. Http协议工作特点和工作原理笔记

    工作特点: (1)B/S结构(Browser/Server,浏览器/服务器模式) (2)无状态 (3)简单快速.可使用超文本传输协议.灵活运行传输各种类型 工作原理: 客户端发送请求浏览器 -> ...