原生 JavaScript 和 jQuery 獲取屏幕視口寬度及元素尺寸的方法：
屏幕視口寬度
// 原生js方法:
window.innerHeight // 標准瀏覽器及IE9+
document.documentElement.clientHeight // 標准瀏覽器及低版本IE標准模式
document.body.clientHeight // 低版本混雜模式
// jQuery方法：
$(window).height()
滾動條滾動的距離
獲取瀏覽器窗口頂部與文檔頂部之間的距離，即滾動條滾動的距離
// 原生js方法：
window.pagYoffset // 標准瀏覽器及IE9+
document.documentElement.scrollTop // 兼容ie低版本的標准模式
document.body.scrollTop // 兼容混雜模式
// jQuery方法：
$(document).scrollTop()
獲取元素尺寸
<body>
<div id="box" style="height: 100px; width: 100px; border: 1px solid #bbb; padding: 10px; margin: 15px;"> </div>
</body>
let box = document.getElementById('box');
$('#box').width() = el.style.width;
$('#box').innerWidth() = el.style.width+el.style.padding;
$('#box').outerWidth() = el.offsetWidth = el.style.width+el.style.padding+el.style.border；
$('#box').outerWidth(true) = el.style.width+el.style.padding+el.style.border+el.style.margin；
但是，如果像上面使用原生style.xxx方法獲取屬性，這個元素必須已經有內嵌的樣式，即<div style="...."></div>；
如果原先是通過外部或內部樣式表定義css樣式，必須使用window.getComputedStyle("元素", "偽類")[xxx]來獲取樣式值。
可以參考：獲取元素CSS值之getComputedStyle方法熟悉--張鑫旭
獲取元素的位置
// 原生js方法：
object.getBoundingClientRect(); // 返回元素的大小及其相對於視口的位置
// jQuery方法：
$(object).offset().top; // 元素距離文檔頂距離
$(object).offset().left; //元素距離文檔左邊距離。
獲取頁面滾動位置
如果已定義，請使用pageXOffset和pageYOffset，否則使用scrollLeft和scrollTop，可以省略el來使用window的默認值。
const getScrollPos = (el = window) =>
({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,
y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});
// getScrollPos() -> {x: 0, y: 500}
頁面平滑滾動到頂部
使用document.documentElement.scrollTop或document.body.scrollTop獲取到頂部的距離。
從頂部滾動一小部分距離。
使用window.requestAnimationFrame（）來滾動。
const scrollToTop = () => {
const c = document.documentElement.scrollTop || document.body.scrollTop;
if (c > 0) {
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0, c - c / 8);
}
};
// scrollToTop();