使用 Javascript 取得元素的座標

每個元素有6個DOM的尺寸屬性:

1. offsetWidth / offsetHeight
2. clientWidth / clienHeight
3. scrollWidth / scrollHeight

這之中有分別有.top/.left方向距離屬性。

簡單介紹

取得寬度/高度

1. offsetWidth / offsetHeight
   是元素本身的寬度/高度，包含邊界、捲軸及padding。
2. clientWidth / clienHeight
   是元素所包含的子元素的寬度/高度，包含padding，但不包含邊界及捲軸。
3. scrollWidth / scrollHeight
   是元素所包含的子元素的完整寬度和高度，包含了超出捲軸之外的部分的寬度與高度。在沒有捲軸的情況下，這個值就等於 clientWidth/clientHeight。

取得相對距離

1. offsetLeft / offsetTop
   是元素本身相對於母元素的水平/垂直距離。
2. clientLeft / clientTop
   是元素本身內外的水平/垂直距離，也就是左邊/上面的邊界寬度。（包含捲軸寬度）
3. scrollLeft / scrollTop 是「內容」被捲動的距離，也就是內容頂端和捲軸頂端的相對距離。

運用

1. 如果想要取得整個文件的寬/高，可以使用document.documentElement這個DOM節點。
   需要注意的是:

• clientWidth/clientHeight是文件不包含卷軸的寬高。而document.documentElement還有另一個屬性:innerWidth/innerHeight是文件包含卷軸的寬高。
• scrollWidth/scrollHeight是文件完整的寬高，包含overflow溢出不在畫面的內容。

1. scrollIntoView/scrollToTop/scrollToBottom
   將卷軸捲動到這個Element的位置。
   它包含的屬性有:

• behavior: "auto"/"smooth" - 過度畫面的效果
• block: "start"/"center"/"end"/"nearset" - 定義垂直方向的對齊
• inline: "start"/"center"/"end"/"nearset" - 定義水平方向的對齊

var elmnt = document.getElementById("content");

function scrollToTop() {
  elmnt.scrollIntoView(true); // Top，是否對齊上方，預設為true。
}

function scrollToBottom() {
  elmnt.scrollIntoView(false); // Bottom
}

elmnt.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});