基於JavaScript實作頁面錨點定位動畫捲動的實例分析

專案上需要的效果,個人不想用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實作頁面錨點定位動畫捲動的實例分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！