基于上一篇写的获取页面垂直滚动值的方法,完成原生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