1. 获取滑轮位置，scrolltop:上下滚动的意思。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="height:100px;width:100px;overflow:auto;">

        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

    </div>

    <div style="height:1000px;"></div>

</body>

</html>

效果：

2. 默认情况下body离HTML页面的左边=8px,上边=8px的距离

$('#i1').offset();    获取当前标签在整个文档中的坐标

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="i1"></div>

    <div style="height:100px;width:100px;overflow:auto;">

        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

        <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

    </div>

    <div id="i2"></div>

    <div style="height:1000px;"></div>

    <script src="jquery-1.12.4.js"></script>

</body>

</html>

运行效果：

3.笔记

位置：

	$(window).scrollTop() 获取滑轮的位置

	$(window).scrollTop(0) 设置滑轮的位置

	scrollLeft([val]) 左右滑轮

	offset().left   获取当前标签在整个文档中的坐标

	offset().top   获取当前标签在整个文档中的坐标

	position()       指定标签相对于父标签(relative)的位置

	$('i1').height()  #	获取标签的纯高度

	$('i1').innerHeight() #获取边框+纯高度+？内边距

	$('i1').outerHeight()  #获取边框+纯高度+？外边距

	$('i1').outerHeight(true) #获取边框+纯高度+？外边距

	#纯高度，边框，外边距，内边距

jQuery高度及位置操作的更多相关文章

  1. 深入学习jQuery元素尺寸和位置操作

    × 目录 [1]尺寸设置 [2]位置设置 前面的话 对于javascript来说,元素尺寸有scroll.offset.client三大属性,以及一个强大的getBoundingClientRect( ...

  2. jquery css事件编程 位置 操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js,jquery 获取滚动条高度和位置, 元素距顶部距离

    一,获取滚动条高度和位置 jQuery 获取览器显示区域的高度: $(window).height();  获取浏览器显示区域的宽度:$(window).width(); 获取页面的文档高度:$(do ...

  4. jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  5. jquery 属性与css操作

    属性1.属性    1.1 attr(name|properties|key,value|key,fn)        1) 获取属性值    $("img").attr(&quo ...

  6. [转]jQuery 选择器和dom操作

    居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...

  7. 锋利的jQuery ——jQuery中的DOM操作（三）

    一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...

  8. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

  9. dom core,html dom,css dom,jquery 中的dom操作

    前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名&quo ...

随机推荐

  1. sklearn半监督学习

    标签: 半监督学习 作者:炼己者 欢迎大家访问 我的简书 以及 我的博客 本博客所有内容以学习.研究和分享为主,如需转载,请联系本人,标明作者和出处,并且是非商业用途,谢谢! --- 摘要:半监督学习 ...

  2. requests,unittest——多接口用例，以及需要先登录再发报的用例

    之前写过最简单的接口测试用例,本次利用unittest进行用例管理,并出测试报告,前两个用例是两个不同网页的get用例,第三个是需要登录才能访问的网页A,并在其基础上访问一个需要在A页面点开链接才能访 ...

  3. JMeter与WireShark

    最近在学习JMeter,刚学了一点皮毛,就掉入了WireShark的坑,我发现在学习的道路上就是不断的给自己挖坑,之前在学习LoadRunner的道路上,遇到的坑更大,就单纯的安装LR就耗费了两个星期 ...

  4. 用Micro:bit做床头灯

    这是一个非常简单的项目,给孩子们介绍感应和控制,使用光敏电阻LDR作为光线传感器和床头灯的LED. 这也介绍了模拟输入的概念.数字输入为ON或OFF.只有0和1两种可能的条件.仿真输入是一系列可能值中 ...

  5. webpack Error: Cannot find module 'webpack/lib/Chunk' Extract-text-webpack-plugin 分离CSS

    深入浅出webpack 1.5章节使用Extract-text-webpack-plugin分离css 安装插件后打包提示错误 Error: Cannot find module 'webpack/l ...

  6. spring-boot 项目整合logback

    使用spring-boot项目中添加日志输出,java的日志输出一共有两个大的方案log4j/log4j2 ,logback.log4j2算是对log4j的一个升级版本. 常规做法是引入slf4j作为 ...

  7. Loadrunner教程--常用操做流程

    1loadrunner压力测试一般使用流程 1.1loadrunner压力测试原理 本质就是在loadrunner上模拟多个用户同时按固定行为访问web站点.其中固定行为在loadrunner中是通过 ...

  8. 2019CSUST集训队选拔赛题解（三）

    PY学长的放毒题 Description 下面开始PY的香港之行,PY有n个要去的小吃店,这n个小吃店被m条路径联通起来. PY有1个传送石和n−1个传送石碎片. PY可以用传送石标记一个小吃店作为根 ...

  9. 关于Amazon.com Seller 网络以及IP地址更换 官方回答

    Greetings from Amazon Seller Support, I understand your concern that there will be a change of IP ad ...

  10. sqoop导入数据到hive表中的相关操作

    1.使用sqoop创建表并且指定对应的hive表中的字段的数据类型,同时指定该表的分区字段名称 sqoop create-hive-table --connect "jdbc:oracle: ...