获取某元素到页面顶部的距离

2024-08-23

获取DOM元素到页面顶部的距离，亲测有效版本（转载）

原文:https://blog.csdn.net/u013764814/article/details/83825479 干脆点(博客就应该干脆,少扯皮) DOM元素有一个属性是offsetTop,表示该元素到父元素顶部的距离.所以最后的答案就是递归将所有的offsetTop加起来. 贴代码! function getElementToPageTop(el) { if(el.parentElement) { return this.getElementToPageTop(el.parentEle

jquery获取元素到页面顶部距离

jquery获取元素到页面顶部距离的语句为: $(selector).offset().top

HTML页面滚动时获取离页面顶部的距离2种实现方法

获取离滚动页面的顶部距离有两种方法一是DOM:而是jquery,具体的实现如下,感兴趣的朋友可以尝试操作下方法一:DOM 复制代码代码如下: <script> window.onscroll = function() { console.info(window.scrollY); } </script> 注册onscroll事件,在控制台(按F12)打印当前页面距离页面顶部的距离(单位:像素px) 方法二:jQuery 复制代码代码如下: $(function() {

jQuery判断元素离页面顶部的高度

原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position().left: 原生写的话就是用获取节点,do while循环就可以了.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

获取html元素所在页面的坐标

function findPosition(oElement) { var x2 = 0; var y2 = 0; var width = oElement.offsetWidth; var height = oElement.offsetHeight; if (typeof (oElement.offsetParent) != 'undefined') { for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetPare

padding 扩大边距 margin-top 与页面顶部的距离 hover鼠标移动到上面出现背景色CSS

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ position: fixed; right:0; left: 0; top: 0; height: 48px; background-color: #2459a2; line-

jquery获取div距离顶部的距离

获取元素到页面顶部距离的语句为: 1.jquery写法:$(“#divID”).offset().top //推荐 $("#vertical").position().top 2.js写法: document.getElementById("divID").offsetTop //推荐

js 获取元素在页面上的偏移量的最佳方式

使用js制作效果时,我们常常要获取某个元素在页面上的偏移量(例如tip提示框功能).而获取偏移量可以直接获取相对于document的偏移量,也可以获取相对与视口的偏移量(viewpoint)加上页面滚动量(scroll)获得. 1.获取相对与document的偏移量 function getOffsetSum(ele){ var top= 0,left=0; while(ele){ top+=ele.offsetTop; left+=ele.offsetLeft; ele=ele.offsetP

用jquery实现小火箭到页面顶部的效果

恩,不知道之前在哪看过一个页面效果就是如果页面被滑动了就出现一个小火箭,点击这个小火箭就可以慢慢回到页面顶部,闲的没事,自己搞了一下需要引入jquery 代码和布局都很简单 <!DOCTYPE HTML> <html> <head> <style> #content{ height: 2000px ; width: 960px ; margin: 0 auto ; background-color: blue ; } #rocket{ width: 50p

我的前端工具集（八）获得html元素在页面中的位置

我的前端工具集(八)获得html元素在页面中的位置 liuyuhang原创,未经允许禁止转载目录我的前端工具集有时候需要用点击等操作,来获取某元素在页面中的位置,然后在该位置添加某些操作如进度条,提示框,特效动画等.(bootstrap提示工具也挺好用的). 1.html代码 <div style="padding:10px"> <h2>This is a page to test Postion.</h2> <div id=&qu

JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离

壹 ❀ 引我在 JQ的offset().top与js的offsetTop区别详解这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset().top = offsetTop - scrollTop的结论,不过此结论只适用于监听元素滚动条,而window的滚动条并不满足.那么在滚动window滚动条时如何获取元素距离视窗顶部的距离呢,这就不得说说本文的主角getBoundingClientRect方法. 贰 ❁ 关于getBoundi

获取一个元素距离顶部的位置和window的滚动值

获取一个元素距离顶部的位置: $(".box").offset().top; 获取window的滚动值: $(window).scrollTop();

快速获取dom到body左侧和顶部的距离，简单粗暴无bug-getBoundingClientRect

获取dom到body左侧和顶部的距离-getBoundingClientRect 平时在写js的时候,偶尔会需要用js来获取当前div到 body 左侧.顶部的距离.网上查一查,有很多都是通过offsetTop.offsetLeft来计算出来的.我按照网上的查到的资料用了一次,算出来了一堆错误答案. 下面我要分享的这个方法,兼容性很好(ie4都ok),而且很方便,不会算错. 这个方法就是 getBoundingClientRect. 1.getBoundingClientRect方法简介 get

jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取文档的高度. 使用 $(document).height() 代表了整个文档的高度 2.获取文档可视区域高度. 使用 $(window).height() 代表了当前可见区域的高度 3.获取当前滚动条距离文档顶部的高度,注意是文档顶部高度,不是窗口的高度. 使用 $(document).sc

getBoundingClientRect方法获取元素在页面中的相对位置

获取元素位置可以用 offset 或 getBoundingClientRect,使用 offset 因为兼容性不好,比较麻烦,offset获取位置会形成"回溯".而 getBoundingClientRect 方法则兼容性较好,基本所有的浏览器都支持了,且使用起来更容易和简单. 1.使用语法: element.getBoundingClientRect(); 方法中没有任何参数,返回值为对象类型. 2.在IE8及以下的浏览器中,返回值对象包含的属性值有: top::元素上边缘距离文档

getBoundingClientRect获取元素在页面上的位置

getBoundingClientRect用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置. getBoundingClientRect是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分). 该函数返回一个Object对象,该对象有6个属性:top,lef,right,bottom,width,height: 这里的top.left和css中的理解很相似,width.height是元素自身的宽高,但是right,bottom和css中的理解有点不一样.right是指元素右边界

javascript js获取html元素各种距离方法

//滚动条 scrollLeft//滚动条距左边距离 scrollTop//滚动条距顶部距离 scrollWidth//滚动条元素的宽 scrollHeight//滚动条元素的高 //可视范围 clientHeight//元素自身可视区域高 clientTop //this.clientW = document.documentElement.clientWidth;//可视宽 //this.clientH = document.documentElement.clientHeight;//可视

获取元素在页面中位置 getBoundingClientRect()

DOM 原生方法getBoundingClientRect()获取元素相对视口位置 DOMRect 对象包含了一组用于描述边框的只读属性--left.top.right和bottom,单位为像素.除了 width 和 height 外的属性都是相对于视口的左上角位置而言的当计算边界矩形时,会考虑视口区域(或其他可滚动元素)内的滚动操作,也就是说,当滚动位置发生了改变,top和left属性值就会随之立即发生变化(因此,它们的值是相对于视口的,而不是绝对的).如果你需要获得相对于整个网页左上角定位

css整个页面离顶部的距离

body { padding:0; margin:0; font-size:12px; line-height:22px; } 说明: 整个页面离顶部的距离是22像素

获取某元素到页面顶部的距离

热门专题