这段代码可以将浏览器、任意dom元素水平和垂直滚动到指定位置。常见场景有:上下滚动效果:水平滚动垂直滚动代码:/***设置浏览器或元素滚动条的滚动距离*@parameledom元素或窗口对象*@paramdirection滚动条方向,默认为y,可选值有:x,y*@paramto滚动条即将滚动到的位置*@paramduration持续时间(可选)*@paramonDone完成后回调(可选)*@paramonScroll正在滚动回调(可选)*@returns{boolean}*/functionscrollTo(ele,direction,to,duration,onDone,onScroll){if(!ele){returnfalse;}如果(!window.requestAnimationFrame){窗口。requestAnimationFrame=(window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(callback){returnwindow.setTimeout(callback,1000/60);});}if(!direction){direction='y';}方向=方向=='x'?'x':'y';vardoDone=function(){if(typeofonDone=='function'){onDone();}}varcallOnScroll=function(){if(typeofonScroll=='function'){onScroll();}}varattr=direction=='x'?'scrollLeft':'scrollTop';varscrollLeft=function(ele){if(ele&&ele.nodeType==1){returnele.scrollLeft;}返回window.pageXOffset||文档.documentElement.scrollLeft||文档.body.scrollLeft||0;}varscrollTop=function(ele){if(ele&&ele.nodeType==1){returnele.scrollTop;}返回window.pageYOffset||文档.documentElement.scrollTop||文档.body.scrollTop||0;}if(!duration||duration<=0){if(ele===window){window.scrollTo(direction==='x'?to:scrollLeft(),direction==='y'?to:滚动顶部());}else{ele[attr]=to;}callOnScroll();完成();返回真;}vardiff=to-ele[attr];if(ele===window){diff=to-(direction=='x'?scrollLeft():scrollTop());}varperTick=(diff/duration)*10;window.requestAnimationFrame(function(){//实现缓动效果if(ele===window){letx=scrollLeft();lety=scrollTop();window.scrollTo(direction==='x'?(x+perTick):x,direction==='y'?(y+perTick):y);callOnScroll();if(direction=='x'?scrollLeft():scrollTop()!==to){scrollTo(ele,direction,to,duration-10,onDone,onScroll);}else{callOnScroll();doDone();}return;}ele[attr]+=perTick;if(ele[attr]!==到){callOnScroll();tool.scrollTo(ele,direction,to,duration-10,onDone,onScroll);}else{callOnScroll();doDone();}});返回真;}Call:varele=document.getElementById('xxx');//滚动到元素的最右边scrollTo(ele,'x',ele.scrollWidth,200);//滚动到元素的顶部scrollTo(ele,'y',0,200);//滚动到浏览器顶部scrollTo(window,'y',0,200);
