scrollTop on scrollingElement
Chrome+ should use `scrollingElement`.
HTML
<div class="fuwari">
<code>documentElement</code>: <span class="html-scrollTop"></span>
<br />
<code>body</code>: <span class="body-scrollTop"></span>
<br />
<code>scrollingElement</code>: <span class="scrolling-scrollTop"></span>
</div>
<button id="click-to-top">
Click to Top
</button>
CSS
html {
height: 100%;
overflow:scroll;
}
body {
height: 200%;
}
.fuwari {
position: fixed;
}
#click-to-top {
bottom: 0;
right: 0;
position: fixed;
}
JavaScript
var elHtmlTop = document.querySelector('.html-scrollTop');
var elBodyTop = document.querySelector('.body-scrollTop');
var elScrollingTop = document.querySelector('.scrolling-scrollTop');
var elCliclToTop = document.querySelector('#click-to-top');
// Chrome 61+ should use `scrollingElement`
// https://dev.opera.com/articles/fixing-the-scrolltop-bug/
// https://developer.mozilla.org/en-US/docs/Web/API/Document/scrollingElement
// https://bugs.chromium.org/p/chromium/issues/detail?id=766938
// https://bugs.chromium.org/p/chromium/issues/detail?id=771184
// https://bugs.chromium.org/p/chromium/issues/detail?id=157855
function bodyOrHtml() {
if ('scrollingElement' in document) {
return document.scrollingElement;
}
// Fallback for legacy browsers
if (navigator.userAgent.indexOf('WebKit') != -1) {
return document.body;
}
return document.documentElement;
}
elCliclToTop.addEventListener("click", function() {
bodyOrHtml().scrollTop = 0;
});
// Update scroll
document.addEventListener("scroll", updateTop);
updateTop();
function updateTop(event) {
elHtmlTop.innerHTML = document.documentElement.scrollTop;
elBodyTop.innerHTML = document.body.scrollTop;
elScrollingTop.innerHTML = document.scrollingElement && document.scrollingElement.scrollTop;
}