项目上需要的效果,个人不想用jquery实现,想着用js自己试试,花了点儿时间,终于实现..
上干货..
function scrollto(y, duration) {
/*y:目标纵坐标,duration:时间(毫秒)*/
var scrolltop = document.body.scrolltop;/*页面当前滚动距离*/
var distance = y - scrolltop;/*结果大于0,说明目标在下方,小于0,说明目标在上方*/
var scrollcount = duration / 10;/*10毫秒滚动一次,计算滚动次数*/
var everydistance = distance / scrollcount/*滚动距离除以滚动次数计算每次滚动距离*/
for (var index = 1; index <= scrollcount; index++) /*循环设置scrollby事件,在duration之内,完成滚动效果*/
settimeout(function () { window.scrollby(0, everydistance) }, 10 * index);
}
以上就是基于javascript实现页面锚点定位动画滚动的实例分析的详细内容。