关于offset().top与scrollTop()

1.offset().top匹配元素相对于文档的偏移位置()

<body>
    <style type="text/css">
        body {
            border:20px solid #CCC;
            margin:10px;
            padding:40px;
            background:#EEE;
        }
        #test {
            width:400px;
            height:200px;
            padding:40px;
            background:#F60;
            border:5px solid #888;
        }
    </style>
    <div id="test"></div>
    <script>
        var test = document.getElementById("test");
        test.innerHTML = "<p>Browser:" + navigator.userAgent + "</p>" +
            "<p>offsetWidth:" + test.offsetWidth + "</p>" +
            "<p>offsetHeight:"+test.offsetHeight+"</p>"+
            "<p>offsetLeft:"+test.offsetLeft+"</p>"+
            "<p>offsetTop:"+test.offsetTop+"</p>";
    </script>
</body>

2.scrollTop()

匹配元素的滚动条的垂直位置(滚动条顶部,与滚动条长度无关)

原文地址:https://www.cnblogs.com/love-dream-88/p/11434292.html

时间: 2024-11-09 15:57:24

关于offset().top与scrollTop()的相关文章

jQuery中animate与scrollTop、offset().top实例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

jquery-get-data(width,height,position,(top,left),scrollTop,scrollLeft)获取数据

获取尺寸 如下: heigh([val|fn]) width([val|fn]) innerHeight() innerWidth() outerHeight([soptions]) outerWidth([options]) 下面就一一介绍(这里多说一下jquery中很多都是既可以返回匹配元素的值,又可以设置匹配元素值) height()取得匹配元素当前计算的高度值(px). width()取得第一个匹配元素当前计算的宽度值(px). /此2个方法对可见和隐藏元素均有效.另外这个补白就是pad

.offset().top是什么意思?

offset获取匹配元素在当前视口的相对偏移: 返回的对象包含两个整形属性:top,left.此方法只对 可见元素有效. $("#div").offset() 获得位移对象:(此时 其实啥也没做) $("#div").offset().top 获得位移高度 用法一般是: $("#div").css({ left:$(this).offset().left+"px", top:$(this).offset().top+25+&q

jQuery offset()函数 和 scrollTop()函数

$(dom).offset() 方法返回或设置匹配元素相对于文档的偏移(位置).{left:100,top:100} $(dom).scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置. eg: 如果想让这段js被chrome和Firefox都支持的话,应该这样: $("html,body").animate({"scrollTop":top});

javascript中top,clientTop,scrollTop,offsetTop用法

网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offsetWidth     (包括边线的宽); 网页可见区域高: document.body.offsetHeight   (包括边线的宽); 网页正文全文宽: document.body.scrollWidth; 网页正文全文高: document.body.scrollHeight; 网页被卷去的高

js 滚动加载iframe框中内容

var isIE6 = !!window.ActiveXObject&&!window.XMLHttpRequest; //滚动加载 var scrollLoad =function(){ $("#content iframe[_src]").each(function(){ var t = $(this); if( t.offset().top<= $(document).scrollTop() + $(window).height() ) { t.attr(

table的滚动和行定位效果

tabel的表头信息固定 而内容滚动:实现:当div的内容超过样式设置的width .height时会出现相应的横向.纵向滚动条.利用这个让table的内容超过规定值时,自动出现滚动条. 而设置两个table;一个为表头信息.一个为内容.内容用一个div,包起来.连个table对齐即可. 定位效果:scrollTop()可以获取设设置当前滚动条距离顶层的高度,offset()获取匹配元素到当前窗口的相对位移,而top顾名思义:而最终得到元素到当前窗口的高度相对偏移量; offset()根据当前行

更改bootstrap-datetimepicker弹出日期选择框只能在下方的限制

城市监控的项目,网页调用监控摄像头,并需要replay的日期和时间选择calendar.找了半天,找到一个好东东~~~~bootstrap-datetimepicker, UI也很有型的范,就用它吧~~, 一切顺利,就是这个calendar的弹出框只能在下方,而我需要嵌套在摄像头监控屏幕下的工具条上,如果弹出框在下方就太离谱了,最后决定改,哈就成就今天这个calendar啦,自我感觉效果不错,晒出来装一下B~~~~哈 更改的bootstrap-datetimepicker.js /** * @l

jqueryui.position.js源码分析

最近要写前端组件了,狂砍各种组件源码,这里分析一款jqueryui中的posistion插件,注意,它不是jqueryui widget,首先看下源码总体结构图 1.看到$.fn.position 是不是很熟悉?嗯,就是将position方法挂载到原型上,然后控件就可以直接调用了, 2.$.ui.position 这个对象是,用来进行冲突判断的,什么冲突?就是元素与父容器所拥有的空间以及当前可用窗口的控件,默认情形下,如果冲突则采用反转方向的方式显示:对这一点不要惊讶,一切都是为了正常显示而用的