基于上一篇寫的擷取頁面垂直滾動值的方法,完成原生js傳回頂部動畫效果:
var backTop = document.getElementById('zyHung').getElementsByClassName('top')[0];
backTop.onclick = function () {
__backToTop(300);
}
/**
* 傳回頂部效果
* @param time 時間機關ms
* */
function __backToTop(time) {
time = time || 300;
var speed = Math.round(__getPageScrollY() / (time / 10));
clearInterval(scrollTopTimer);
var scrollTopTimer = setInterval(function () {
var beforeTop = __getPageScrollY();
if (beforeTop > 0) {
if (beforeTop <= speed) {
__getPageScrollY(0);
} else {
var resultTop = beforeTop - speed;
__getPageScrollY(resultTop);
}
} else {
clearInterval(scrollTopTimer);
}
}, 10)
}
/**
* 擷取&&設定-頁面垂直滾動值
* */
function __getPageScrollY(top) {
if (top || Number(top) == 0) { //設定垂直滾動值
if (self.pageYOffset) {
self.pageYOffset = Number(top);
}
if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
document.documentElement.scrollTop = Number(top);
}
if (document.body) {// all other Explorers
document.body.scrollTop = Number(top);
}
return true;
} else { //擷取垂直滾動值
var yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
}
return yScroll;
}
};
另外,由此及彼,頁面水準滾動和垂直滾動差不多,隻要将相應的Y改為X就好,如:
self.pageYOffset => self.pageXOffset; document.documentElement.scrollTop => document.documentElement.scrollLeft