scrollTop,offset().top
1.scrollTop是指滚动条滚动的距离
如果没有出现滚动条,则距离为0
css:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
input{
position: fixed; }
.div1{
width: 200px;
height: 200px;
overflow-y: scroll;
border: 1px solid #d74147;
}
.div3{
width: 200px;
height: 200px;
border: 1px solid #d74147;
margin: 10px 0;
}.div4{
width: 30px;
height: 30px;
background: #dd8811;
}
.div2{
width: 30px;
height: 130px;
background: #dd0077;
overflow-y: scroll;
}
</style>
body:
<input type="button" value="点击"/>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<div class="div1">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div> <div class="div2">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div> <p class="div5">1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p> <div class="div3">
<div class="div4">
</div>
</div>
js
$(function(){
$('input').click(function() {
//alert($('.div2').scrollTop());
//alert($('.div1').offset().top);//90
//alert($('body').scrollTop());
//alert($('.div1').offset().top);
//alert($('body').offset().top);
alert($('html').offset().top);//负数是因为找不到
//alert($('html').scrollTop());
//alert($('.div1').scrollTop());
});
});
2offset().top指的是到文档的距离
不是到可视区域的文档的距离,是最顶部的文档的距离
http://www.heishou.com.cn/点击这个链接,交流论坛黑手安全网
scrollTop,offset().top的更多相关文章
- jQuery中animate与scrollTop、offset().top实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery的offset().top 和position().top 详解 和如何用js实现
1 jquery定义: offset().top 相对于当前文档的坐标(的高度) ps:包括滚动条卷去的高度 position().top 返回的是相对于其定位的祖辈元素的坐标(的高度) ps:包括滚 ...
- div设置overflow-scroll滚动之后,jq获取其子元素的offset.top出现问题。
先上个图: 布局很简单,左右超过屏幕的部分自行滚动. 1. html <div class="ce-container"> <div class="ce ...
- JQ的offset().top与js的offsetTop区别详解
一.前言 最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因 ...
- JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离
壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...
- .offset().top是什么意思?
offset获取匹配元素在当前视口的相对偏移: 返回的对象包含两个整形属性:top,left.此方法只对 可见元素有效. $("#div").offset() 获得位移对象:(此时 ...
- css3的transform变换scale和translate等影响jQuery的position().top和offset().top
css3的transform变换scale和translate等影响jQuery的position().top和offset().top
- jquery的offset().top与javascript的offsetTop区别?
offset().top是jquery的方法,需引入jquery,它获取你绑定元素上边框相对于html上边界的偏移量 offsetTop是原生js的方法,它获取你绑定元素上边框相对于离自己最近且pos ...
- jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法
jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...
随机推荐
- C# Hashtable 使用说明 以及 Hashtable和HashMap的区别
一,哈希表(Hashtable)简述 在.NET Framework中,Hashtable是System.Collections命名空间提供的一个容器,用于处理和表现类似key/value的键值对,其 ...
- hibernate:XXX is not mapped
hibernate:XXX is not mapped 检查项目中是否将hbm.xml引入
- oracle数据库管理--用户管理
一.oracle数据库用户管理 1.sys和system用户区别 (1)存储的数据的重要性不同: sys所有oracle的数据字典的基表和视图都存放在sys用户中,这些基表和视图对于or ...
- jQuery 验证实例(shopnc二次开发)
shopnc 商家用户实现添加用户与前台用户分离, jQuery 验证实例 equalTo:等于 <div id="saleRefund" show_id="1&q ...
- break语句的使用
先举一个简单点的例子 #include<stdio.h> #include<stdlib.h> int main() { float a,b; char c; printf(& ...
- SQL Server 文件自动增长那些事
方法 1. 把文件的增长设置为按照固定大小增长. 如filegrowth = 100MB; ------------------------------------------------------ ...
- linux系统怎么改为中文版(转)
linux系统安装好后怎么改为中文版呢?今天就跟大家介绍下linux系统改为中文版的方法,希望能帮助到大家! 以下是linux系统改为中文版的四种方法,一起来看看: 方法1:写入环境变量 echo & ...
- POJ 1811 Prime Test 素性测试 分解素因子
题意: 给你一个数n(n <= 2^54),判断n是不是素数,如果是输出Prime,否则输出n最小的素因子 解题思路: 自然数素性测试可以看看Matrix67的 素数与素性测试 素因子分解利用 ...
- hdu 5615 Jam's math problem(判断是否能合并多项式)
方法一:由十字相乘相关理论我们能知道,如果要有p,k,q,m,那么首先要有解,所以b*b-4*a*c要>0,然而因为p,k,q,m是正整数,所以代表x1,x2都是有理数,有理数是什么鬼呢?就是解 ...
- malloc用法
malloc用法三部曲:(#include<stdlib.h>下的库函数) 1.malloc eg.ps=(char*)malloc(sizeof(char)*20)的意思是,动态分配空间 ...