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

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内核分析第八周学习总结

    LINUX内核分析第八周学习总结 标签(空格分隔): 20135328陈都 陈都 原创作品转载请注明出处 <Linux内核分析>MOOC课程 http://mooc.study.163.c ...

  2. 四则运算安卓版ver.mk3

    在原有的基础上做了些许改动以及添加了一点小功能,以下是代码: package com.example.add; import java.io.File; import com.example.add. ...

  3. “数学口袋精灵”App的第三个Sprint计划(总结与团队感悟)----开发日记

    第三阶段Sprint完成情况: 我们的"数学口袋精灵"App已经完成了,该app能随机产生多种形式的算式,比如带括号的,分数四则运算,混合运算,阶乘等,通过游戏形式让用户乐在其中. ...

  4. C# 中颜色和名称样式对照表

    WPF中的画刷也一样适用 System.Windows.Media.Brushes.名称 (如:System.Windows.Media.Brushes.AliceBlue) :first-child ...

  5. liuyan

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. Activiti流程编辑器针对自定义用户角色表优化改造

    本文目的: 针对自定义的用户.角色表,对Activiti的在线流程设计器进行优化改造,使之能直接在图形界面上完成对节点办理人.候选人.候选组的配置,不需要先去查数据库中的用户ID.角色ID等信息再填入 ...

  7. [CNBETA]动图告诉你 光速到底有多慢?

    https://www.cnbeta.com/articles/tech/811381.htm 我们知道,30万公里每秒的光速是宇宙内目前已知的最高速度,至少现有人类理论体系下它是不可跨越的.30万公 ...

  8. Angular 简单的Get

    <!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...

  9. TF版本的Word2Vec和余弦相似度的计算

    前几天一个同学在看一段代码,内容是使用gensim包提供的Word2Vec方法训练得到词向量,里面有几个变量code.count.index.point看不懂,就向我求助,我大概给他讲了下code是哈 ...

  10. Delphi通过查找字符定位TADOQuery数据的位置

    通过TADOQuery的方法Locate,输入字符,查找到定位到对应的数据位置,优点快速定位,缺点是只匹配查找到的和第一个位置,无法连续定位下一个! //定位qrymembertype.Locate( ...