jQuery之_元素滚动
对应的知识点铺垫,但是有一个很重要的问题就是兼容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之_元素滚动的更多相关文章
- Jquery实现图片左右滚动(自动)
<!DOCTYPE HTML><html><head><title>基于jQuery的控制左右滚动效果_自动滚动版本</title>< ...
- Jquery 实现banner图滚动效果
html代码: <div id="focus"> <ul> <li><p>禅的修行应要无欲无求1</p><a hr ...
- h5之scrollIntoView控制页面元素滚动
如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法 ...
- 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决
jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...
- 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js
1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...
- jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解
jQuery操纵DOM元素属性 attr()和removeAtrr()方法使用详解 jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的 ...
- jQuery如何判断元素是否是隐藏的?
jQuery函数简介: is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true. 如果没有元素符合,或者表达式无效,都返回'false'. 注 ...
- 用jQuery判断一个元素的各种状态
用jQuery判断一个元素是否显示 用jQuery判断一个元素是否显示:$(element).is(":visible"); 类似的,判断一个元素是不是第一个子元素:$(ele ...
- jQuery检查某个元素在页面上是否存在
用jQuery检查某个元素在网页上是否存在时,应该根据获取元素的长度来判断,代码如下: if($("#tt").length > 0) { //元素存在时执行的代码 } 具体 ...
随机推荐
- 大数据调错系列之hadoop在开发工具控制台上打印不出日志的解决方法
(1)在windows环境上配置HADOOP_HOME环境变量 (2)在eclipse上运行程序 (3)注意:如果eclipse打印不出日志,在控制台上只显示 1.log4j:WARN No appe ...
- Linux C 语言之 Hello World 详解
目录 Linux C 语言之 Hello World 详解 第一个 C 语言程序 程序运行原理 编译,链接 运行时 链接库 编译器优化 Hello World 打印原理 stdout, stdin 和 ...
- 详解LeetCode 137. Single Number II
Given an array of integers, every element appears three times except for one, which appears exactly ...
- 20155209 2016-2017-2 《Java程序设计》第二周学习总结
20155209 2016-2017-2 <Java程序设计>第二周学习总结 教材学习内容总结 类型总结:常用定义byte(符号%d):short(符号%d):int(符号%d):long ...
- 20155234 2016-2017-2《Java程序设计》课程总结
20155234 2016-2017-2<Java程序设计>课程总结 每周作业链接汇总 预备作业1:师生关系 预备作业2:优秀技能经验 预备作业3:虚拟机linux初接触 第一周作业:认识 ...
- C语言复习20170728
C语言复习20170728 键盘输入和屏幕输出 字符常量:把字符放在一对单引号内,适用于多数可打印字符. 转义字符: 以反斜线()开头,也是放在一对单引号内,适用于控制字符. .\t,是水平制表符,相 ...
- 20155336 2016-2017-2 《Java程序设计》第三周学习总结
20155336 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 第四章 类与对象 定义: 对象(Object):存在的具体实体,具有明确的状态和行为. 类( ...
- 【SAP BI】BW如何连接SQLSERVER数据库
一.工具 源版本: SQLSERVER2008 数据库TEST 目标版本: SAP 客户端 7.4 服务器7.5 二.在BW中建立数据库连接,并生成数据源 2.1 登录SAP BW开发机 ,输 ...
- cv::Mat转换QImage
cvtColor(img, img, CV_BGR2RGB); QImage image((uchar*)img.data,img.cols,img.rows,QImage::Format_RGB88 ...
- Drupal7重置密码方法
Drupal版本 7.40 方法1: 根目录index.php添加 require_once 'includes/password.inc'; require_once 'includes/boots ...