jQuery.offset()をjQueryなしで標準JavaScriptだけで取得する

jQueryでは、Documentから見たXY座標を取得する方法として、jQuery.offset()が用意されています。
このjQuery.offset()をプレーンな JavaScriptで取得する方法を紹介します。

offset().top

const element = document.getElementById("target");  
const rect = element.getBoundingClientRect();  
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;  
console.log( rect.top + scrollTop )  // これが jQueryの offset().top相当の値

offset().left

var element = document.getElementById("target");
var rect = element.getBoundingClientRect();
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
console.log( rect.left + scrollLeft ); // これが jQueryの offset().left相当の値