求教js如何获取元素到浏览器顶部的距离
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了求教js如何获取元素到浏览器顶部的距离相关的知识，希望对你有一定的参考价值。
网页结构如下：
<body style="overflow:auto">
<div>
<ul>
<li></li>
<li></li>
... ...
</ul>
</div>
</body>
当我滑动滚动条时，我想知道某一个li距离浏览器顶部的距离，我用$("li").scrollTop()一直都是0，无论我滚动条滚到哪。
还有一个问题，我怎么设置滚动条的位置，网上百了一下说是用$("div").scrollTop(300);但是我这边滚动条是在body上，我用document.documentElement.scrollTop(300)，或者document.body.scrollTop(300)都不行，求教各位了
1、打开sublime text3，也可以用其他编辑器，这里新建一个html文档作为示范。
2、创建一下HTML文档的基本架构。
3、设置多个标签，这样等会可以有更多选择。
4、创建一个JS文档，并且与HTML文档关联。
5、输入var test = document.getElementById( "pp").offsetTop;document.write( test )。
6、offsetLeft就能知道元素到顶部的距离。
看看吧，发代码就屏蔽了
下一个这样写，设置滚动位置：
window.onscroll= function()bb();
function bb()
var obj = document.getElementById("aaa");
var topa = obj.offsetTop
var top=document.documentElement.scrollTop;
document.getElementById("aaa").innerHTML = topa-top;
window.onload=function()
document.documentElement.scrollTop = "200px";
希望能帮到你！
本回答被提问者和网友采纳 参考技术B <!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<style>
body
margin: 0;
padding: 0;
.mdiv
width: 100px;
height: 100px;
background-color: #097df3;
</style>
</head>
<body>
<div style="height: 1000px"></div>
<div class="mdiv"></div>
<script src="jquery-2.1.1.min.js"></script>
<script>
//原生
//获取div距离顶部的距离
var mTop = document.getElementsByClassName('mdiv')[0].offsetTop;
//减去滚动条的高度
var sTop = document.body.scrollTop;
var result = mTop - sTop;
console.log(result);
//Jquery
mTop = $('.mdiv')[0].offsetTop;
sTop = $(window).scrollTop();
result = mTop - sTop;
console.log(result);
</script>
</body>
</html> 参考技术C 某一个li给他一个class，如test获取他到浏览器顶部的距离直接用$('.test').css('top');
第二个问题设置浏览器的滚动条，首先必须浏览器存在滚动条，设置是这么写的：
document.documentElement.scrollTop = 0;为了兼容性html声明部分最好换成这个
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 参考技术D function scrollToTop()
window.scrollTo(0,0);
如何获取div距离浏览器顶部的高度
可以使用offset()方法来获取元素距离浏览器的边距，offset()
方法返回或设置匹配元素相对于文档的偏移（位置）。
工具原料：编辑器、浏览器
1、首先设置一个div然后使用offset()方法来获取其距离浏览器顶部的高度，简单的代码示例如下：
<body style="margin: 0;padding: 0;">
<div style="width: 200px;height: 200px;border: 1px solid red;margin-top:100px;"></div>
<script>
alert($('div').offset().top);
</script>
</body>
2、因为div距离顶部的距离是100像素，所以弹出的应该是100，如下图：
<script>
var oBox = document.getElementById("box");
alert( oBox.offsetTop );
</script>
前提是这个DIV要相对于body定位，才能获取到值本回答被提问者采纳
以上是关于求教js如何获取元素到浏览器顶部的距离的主要内容，如果未能解决你的问题，请参考以下文章
JQ的offset().top与JS的getBoundingClientRect区别详解，JS获取元素距离视窗顶部可变距离