JS计算元素的距离

Question

如图所示

• 黑色框是窗口大小，也就是viewport。

• 红色虚线是整个页面的大小，其中一部分已经滚动超出viewport 一部分还未显示出来

• 红色虚线框内部的蓝绿色虚线是一个个的元素li

• 现在要获取某个元素到viewport顶部的距离，即红色箭头所指的那部分距离，应该如何计算。

可以使用jquery

Answer 1

document.getElementById('xx').getBoundingClientRect().top
题主要的是这个哈，刚好前阵子也用到过记得。

Answer 2

设元素为x，x距离viewport的距离为：x.offsetTop - document.documentElement.scrollTop;

Answer 3

$('#element').offset().top-$(window).scrollTop();

Demo