今天，我们来说一个比较小的点，但也是比较常用的知识点，就是获取尺寸的方法。
首先，我们先来说一下获取可视区的宽度，但前提你要知道什么是可视区，就是我们现在双眼所看的这个界面，当然不包括滚动条拉下去之后的啦，
接下来我们说一下方法：
//获取可视区的宽度
document.documentElement.clientWidth;
//获取可视区的高度
document.documentElement.clientHeight;
那如果你还不理解的话，我们来个比较官方的说法：clientWidth和clientHeight这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。返回了元素大小，但没有单位，默认单位是px，如果你强行设置了单位，比如100em之类，它还是会返回px的大小。(CSS获取的话，是照着你设置的样式获取)。对于元素的实际大小，clientWidth和clientHeight理解方式如下：
a. 增加边框，无变化；
b. 增加外边距，无变化；
c. 增加滚动条，最终值等于原本大小减去滚动条的大小；
d. 增加内边距，最终值等于原本大小加上内边距的大小；
我们可以看一下在网页里的实际情况
//获取滚动条的滚动的距离
document.documentElement.scrollTop
但是在IE中有兼容性问题，所以我们要怎么解决这个问题呢，我们可以这样做
var t =
document.documentElement.scrollTop||document.body.scrollTop
我们可以这样用
window.onscroll = function(){
var
t = document.documentElement.scrollTop||document.body.scrollTop
console.log(t)
}
上面我们都有在说一些获取的尺寸都是可视区，那我们再说一下获取整个页面的尺寸要如何做：
//获取整个页面的宽度
document.body.clientWidth;
//获取整个页面的高度
document.body.clientHeight;
最后，给大家普及一个我们经常在网页上看到的右边的回到顶部的做法，也刚好用到我们上面所讲的知识。
首先，我们设置回到顶部那个小方块必须在浏览器的可视区的正中间
//获取可视区的高度的一半减去元素的高度的一半 (当前元素就会在浏览器的正中央)
var iH = document.documentElement.clientHeight/2-box.offsetHeight/2;
box.style.top = iH+‘px‘;
window.onscroll = function(){
//滚动的时候获取滚动条的滚动距离
var t = document.documentElement.scrollTop
|| document.body.scrollTop;
//小方块的top值就等于 iH+ 滚动条的滚动距离
box.style.top = t+iH+‘px‘;
}
box.onclick = function(){
//让滚动条的滚动距离为0就可以回到顶部了
document.documentElement.scrollTop = document.body.scrollTop = 0
}
当点击红色小方块的时候，可以快速回到顶部，而他也始终保留在可视区的中间。
好了，细碎的知识点就讲到这里，欢迎批评改正。
原文地址：https://www.cnblogs.com/cuigege/p/9066351.html