Example analysis of implementing page anchor positioning animated scrolling based on JavaScript

Personally, I didn’t want to use jquery to achieve the desired effect on the project. I thought about using js to try it myself. It took me a while and finally achieved it..

Here’s some useful information..

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);
 }

The above is the detailed content of Example analysis of implementing page anchor positioning animated scrolling based on JavaScript. For more information, please follow other related articles on the PHP Chinese website!