项目上需要的效果,个人不想用jquery实现,想着用js自己试试,花了点儿时间,终于实现..
上干货..
1 function scrollTo(y, duration) { 2 /*y:目标纵坐标,duration:时间(毫秒)*/ 3 var scrollTop = document.body.scrollTop;/*页面当前滚动距离*/ 4 var distance = y - scrollTop;/*结果大于0,说明目标在下方,小于0,说明目标在上方*/ 5 var scrollCount = duration / 10;/*10毫秒滚动一次,计算滚动次数*/ 6 var everyDistance = distance / scrollCount/*滚动距离除以滚动次数计算每次滚动距离*/ 7 for (var index = 1; index <= scrollCount; index++) /*循环设置scrollBy事件,在duration之内,完成滚动效果*/ 8 setTimeout(function () { window.scrollBy(0, everyDistance) }, 10 * index); 9 }