获取当前窗口到页面顶端高度:

js: document.documentElement.scrollTop

JQ:$(document).scrollTop()或者$(window).scrollTop()

设置当前窗口滑动高度(以设置为100px为例):

js:document.documentElement.scrollTop = 100

JQ:$(document).scrollTop(100)或者$(window).scrollTop(100)

获取某元素到页面顶端高度:

JQ:$("p").offset().top

js:

function getOffsetSum(ele){
var top= 0,left=0;
while(ele){
top+=ele.offsetTop;
left+=ele.offsetLeft;
ele=ele.offsetParent;
}
return {
top:top,
left:left
}
}

可以看出,js中元素的offsetTop和offsetLeft是相对于它的offsetParent的,给其上层父元素加上position:relative就可以改变其为下面子节点的offsetParent了

到浏览器顶部的获取js和jquery的更多相关文章

  1. js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

    做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

  2. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  3. Jquery DIV滚动至浏览器顶部位置固定

    获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() { v ...

  4. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  5. 获取DIV与浏览器顶部相聚一定位置之后移动DIV

    获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() {  ...

  6. js和JQuery中的获取宽、高、位置等方法整理

    1.获取当前窗口宽度区别(需要注意的是用的window还是document)JQuery:console.log($(window).width()); //获取窗口可视区域的宽度 console.l ...

  7. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

  8. Jquery DIV滚动至浏览器顶部后固定不动代码

    $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $(".win").offset().top; //滚动条事件 $(window).scr ...

  9. js和jquery获取父级元素、子级元素、兄弟元素的方法

    最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ [js的获取方式] function dom(){      var a = document.getElementByIdx ...

随机推荐

  1. 生命游戏&一维细胞自动机 笔记

    de 生命游戏是一种简单的聚合模型,展示了事物是如何聚合的,是自动机(CA)模型的一种.由剑桥大学约翰康威发明,其规则为: 1. 每个细胞拥有八个邻居,细胞状态只有存活(黑)和死亡(白)两种: 2.处 ...

  2. android 活动的生命周期

    掌握活动的生命周期非常重要,因为一个正常的android应用,会有很多的活动,如何在这些活动之间进行切换.数据的交互等,就经常会用到活动的生命周期这一块的知识.可以说,只要掌握了活动的生命周期,才能更 ...

  3. Selenium的自我总结2_元素基本操作

    对于Selenium的基本元素的操作,就自己的了解做了一个基本的介绍,这篇直接上代码,针对一个页面如何操作写了些基本的操作脚本,希望对初学者有一定的帮助,也希望通过这些总结让自己有一些清晰的认识和了解 ...

  4. Windows查看端口被什么进程占用的简单方法----菜鸟养成

    1.  还是因为同事告知Oracle的服务器连不上 最后发现改了端口就可以了, 但是很困惑 不知道为什么会这样,然后简单查了下: 命令 netstat -ano 查看监听的端口 baidu出来一个管道 ...

  5. [日常工作] Linux与Windows的连接访问以及数据共享等方法 vncserver smb xshell xftp winscp mount等

    日常办公机器是用 windows, 但是越来越多的测试和工作需求需要使用linux. 这里以最常用的系统centos为例进行说明 1. 远程连接 ssh的方式 建议使用xmange 系列的 xshel ...

  6. linux中tomcat修改错误日志路径

    涉及文件 log4j.properties   (一般开发将该文件放在项目的缺省目录即源包下,在文件系统里,就是在项目的/src/java目录下,缺省的文件名是log4j.properties,这样项 ...

  7. 训练题(代码未检验)(序列前k大和问题)

    大厦 Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 65535/32768K (Java/Other) Total Submission ...

  8. bzoj 2141 : 排队 (cdq分治+bit)

    链接: https://www.lydsy.com/JudgeOnline/problem.php?id=2141 思路: 其实就是求动态逆序对...cdq降维,用树状数组前后求两遍逆序对就好了 切水 ...

  9. P3312 [SDOI2014]数表

    啊啊啊我昨天怎么没写题解wwww 补昨日题解... 题目链接 : https://www.luogu.org/problemnew/show/P3312 也是莫反 我要把fft留到今天写 [和zyn小 ...

  10. android 面试准备基础题

    1.    请描述下Activity的生命周期. 必调用的三个方法:onCreate() --> onStart() --> onResume(),用AAA表示 )父Activity启动子 ...