JS-scrollTop, scrollHeight, clientTop, clientHeight, offsetTop, offsetHeight understanding

scrollTop, writable (property only a writable elements of these)

Element.scrollTop Property can get or set the contents of a rolling element of vertical pixels.

An element scrollTopvalue of the element to the top of the viewport visible measure of the distance (the top of) the content. When the content of a scroll bar elements are not produced in the vertical direction, then its scrollTopvalue is zero.

scrollTop may be set to any integer value, while paying attention to:
- If an element can not be scrolled (e.g., it does not overflow, or the element has a "non-scrollable" attribute), scrollTop will be set to 0.
- ScrollTop set value is less than 0, 0 is set scrollTop
- If you exceed the value of the container scrollable set, scrollTop will be set to the maximum.

Figure understand:

Back to top:

element.scrollTop = 0

Top a simple example, and from fast to slow to achieve animation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回顶部</title>
    <style>
        #outer { height: 100px; width: 100px; padding: 10px 50px; border: 1px solid; overflow: auto; }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
    <button onclick="toTop(outer)">返回顶部</button>
    <script>
        function toTop(ele) {
            // ele.scrollTop = 0;
            let dy = ele.scrollTop / 4; // 每次更新scrollTop改变的大小
            if (ele.scrollTop > 0) {
                ele.scrollTop -= Math.max(dy, 10);
                setTimeout(() => {
                    toTop(ele, dy);
                }, 30);
            }
        }
        // 初始化
        window.onload = () => {
            for (let i = 0; i < 233; i++) inner.innerText += `第${i}行\n`;
        }
    </script>
</body>
</html>

scrollHeight, read-only

Element.scrollHeight This read-only property is a measure of the height of the element content, since the overflow and comprises a view of the content is not visible.

scrollHeightValue equal to the minimum height of the element without using the scroll bar in order to meet the viewports with the desired content. Without the vertical scroll bar, the scrollHeightminimum value of the content of all elements of the view required to fill clientHeightthe same. Including the elements padding, but does not include the elements borderand margin. scrollHeightAlso it includes ::beforeand ::aftersuch pseudo elements.

grammar:

var intElemScrollHeight = document.getElementById(id_attribute_value).scrollHeight;

Scroll to determine whether the elements in the end:

element.scrollHeight - element.scrollTop === element.clientHeight

The bottom scroll area information:

element.scrollTop === element.scrollHeight

Figure understand:

clientTop, read-only

A top border element width (in pixels). Excluding the top margins or padding. clientTopIt is read-only.

clientHeight, read-only

这个属性是只读属性，对于没有定义CSS或者内联布局盒子的元素为0，否则，它是元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

clientHeight 可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算.

看图理解:

offsetTop, 只读

HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。
HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的包含该元素的定位元素。如果没有定位的元素，则 offsetParent 为最近的 table, table cell 或根元素（标准模式下为 html；quirks 模式下为 body）。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。

offsetHeight, 只读

HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。

对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。

如果元素被隐藏（例如元素或者元素的祖先之一的元素的style.display被设置为none），则返回0

语法:

var intElemOffsetHeight = document.getElementById(id_attribute_value).offsetHeight;

看图理解：