Beispielanalyse der Implementierung von Seitenankerpositionierung animiertem Scrollen basierend auf JavaScript

Ich persönlich wollte jquery nicht verwenden, um den Effekt zu erzielen, den ich für das Projekt brauchte, also dachte ich darüber nach, js zu verwenden, um es selbst auszuprobieren. Es hat eine Weile gedauert, bis ich es endlich erkannt habe.

Hier ist das Praktische..

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

Das obige ist der detaillierte Inhalt vonBeispielanalyse der Implementierung von Seitenankerpositionierung animiertem Scrollen basierend auf JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!