这些高度相信很多同学都搞不清楚吧。这里我通过本地测试，发现了区别。
以聊天窗口为例。
元素(class=’content’)高度444px,其中上下padding分别是10px,margin为0。距离最近的一个定位的父元素的上边距是60px。
这里，在控制台打印出各个高度值：
var c =document.getElementsByClassName('content')[0];
console.log(c.offsetTop,c.offsetHeight,c.clientHeight,c.scrollHeight,c.scrollTop);
默认情况下：
60 464 464 464 0
加了border(1px)之后
60 464 462 462 0
缩小窗口：
60 339 337 337 0
内容超出一面，出现滚动条：
60 464 464 710 246
内容超出一面，出现滚动条，且加了border(1px)之后：
60 464 462 710 246
由此可得出结论：
offsetTop 距离最近定位父元素的上外边距(margin)。
此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。
offsetHeight 是自身元素的高度（可视区）：元素内容+内边距(padding)+边框(border)，缩小浏览器窗口，这个值会改变
clientHeight 是自身元素的高度（可视区）：元素内容+内边距(padding)，缩小浏览器窗口，这个值会改变
scrollHeight = 容器元素的上下内边距(padding)之和 + 内容所占据的宽度(含隐藏的)，值最小等于元素的clientHeight属性值。
scrollTop = 没有滚动条时是0。为scrollHeight – offsetHeight的差。
回到示例，想让有消息来了，自动滚动最后一条消息，做法是：
var c =document.getElementsByClassName('content')[0];
c.scrollTop = c.scrollHeight - c.offsetHeight;
当然，这里的offsetHeight不减去也是可以的。
其它的offsetLeft,offsetWeight,clientWidth,scrollWidth,scrollLeft同理。
jQuery里也有获取高度的方法：
innerHeight()获取第一个匹配元素内部区域高度（包括补白、不包括边框）。同clientHeight
outerHeight([options])获取第一个匹配元素外部高度（默认包括补白和边框）。同offsetHeight
scrollTop([val]) 同scrollTop
offset()返回{left: 0, top: 60, width: 587, height: 464}，对应offsetLeft,offsetTop,offsetWidth,offsetHeight
height()获取或者设置offsetHeight
position() 获取匹配元素相对父元素的偏移
参考：
scrollTop、offsetHeight和offsetTop等属性用法详解-蚂蚁部落
