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) { //元素存在时执行的代码 } 具体 ...
随机推荐
- 04.flume+kafka环境搭建
1.flume下载 安装 测试 1.1 官网下载,通过xshell从winser2012传到cent0s的/opt/flume目录中,使用rz命令 1.2 解压安装 tar -zxvf apache- ...
- hadoop 提交程序并监控运行
程序编写及打包 使用maven导入第三方jar pom.xml <?xml version="1.0" encoding="UTF-8"?> < ...
- STM32 HAL库学习系列第6篇---定时器TIM 级联配置
应用情景 使用定时器配置编码器模式,发现STM32只有两个定时器是32位,16位的测量值不够用,发现是可以使用两个16位定时器级联为32位的. 我是在使用编码器计数电机转速时使用,但是最终实现的效果不 ...
- stm32串口通信实验,一点笔记
第一次深入学习stm32,花了好长时间才看懂代码(主要是C语言学习不够深入),又花了段时间自己敲了一遍,然后比对教程,了解了利用中断来串口通信的设置方法. 板子是探索版f407,本实验工程把正点原子库 ...
- Keil MDK最新版 5.25介绍及下载地址
看到Keil MDK又出新版咯,分享给大家 Keil MDK-ARM 5.25 uVision5开发工具下载地址:http://www.myir-tech.com/soft.asp?id=1140 K ...
- Pyhton-类(2)
·类(2) @ 继承(inheritance) 什么是继承: B继承A:A是父类(超类),B是子类(基类).继承可以实现代码重复利用,实现属性和方法继承. 继承可以使子类拥有父类的属性和方法,也可以重 ...
- 两组数据的均值是否具有显著差异的T检验
最近在做分析的时候,遇到了T检验,然而对于没有统计学背景的人来说完全不知如何下手 当然了,遇到问题第一反应就是百度. 果然百度出来了很多链接,当时第一次直接选择了用Excel去做T检验.下面是源数据 ...
- PMU 精密测量单元
PMU(Precision Measurement Unit,精密测量单元)用于精确的DC参数测量,它能驱动电流进入器件而去量测电压或者为器件加上电压而去量测产生的电流.PMU的数量跟测试机的等级有关 ...
- postgres 输出数据集的自定义函数
定义一个可输出数据集自定义函数有多种方法 1,先定义结构,再使用结构输出结果 CREATE TYPE compfoo AS (f1 int, f2 text); CREATE FUNCTION get ...
- 【LG3231】[HNOI2013]消毒
题面 洛谷 题解 代码 \(100pts\) #include<iostream> #include<cstdio> #include<cstdlib> #incl ...