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 중국어 웹사이트의 기타 관련 기사를 참조하세요!