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