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

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. Linux内核分析 笔记五 扒开系统调用的三层皮(下) ——by王玥

    (一)给MenuOs增加time和time-asm命令 更新menu代码到最新版 在main函数中增加MenuConfig 增加对应的Ttime和TimeAsm函数 make rootfs (二)使用 ...

  2. text3

    GitHub地址https://github.com/gaodejian/gaodejian/blob/master/firework 课题研究的目的和意义 java编程语言在编程方面的具体应用,以及 ...

  3. zookeeper安装和使用 windows环境(转)

    原文地址: http://blog.csdn.net/tlk20071/article/details/52028945 简介 ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是G ...

  4. PAT L2-012 关于堆的判断

    https://pintia.cn/problem-sets/994805046380707840/problems/994805064676261888 将一系列给定数字顺序插入一个初始为空的小顶堆 ...

  5. Spring Cloud Zipkin

    Zipkin the idea is from the googlge paper:Dapper https://yq.aliyun.com/articles/60165 https://www.e4 ...

  6. Java使用HTTPClient4.3开发的公众平台消息模板的推送功能

    代码引用,参考文章:http://www.cnblogs.com/feiyun126/p/4778556.html,表示感谢! package com.yuanchuangyun.cyb.manage ...

  7. [转帖]服务器操作系统应该选择 Debian/Ubuntu 还是 CentOS?

    来源:https://www.zhihu.com/question/19599986 作者: https://www.zhihu.com/people/yuan-hao-yang/answers IT ...

  8. SQL Server 公用表表达式(CTE)实现递归

    公用表表达式简介: 公用表表达式 (CTE) 可以认为是在单个 SELECT.INSERT.UPDATE.DELETE 或 CREATE VIEW 语句的执行范围内定义的临时结果集.CTE 与派生表类 ...

  9. List泛型集合

    List和数组 相同点: 都可以控制元素类型 不同点: List的长度是可变的,所以list比数组更容易掌控 List属性 1.Count 获取集合中实际包含的元素个数 2.Capcity 集合中可以 ...

  10. ceph S3测试--cosbench

    COSBench安装 Cosbench是Intel的开源云存储性能测试软件,COSBench目前已经广泛使用与云存储测试,并作为云存储的基准测试工具使用 1 环境 1.1 操作系统 COSBench可 ...