JavaScriptのsetTimeoutを使用してスムーススクロールをエミュレートする

Question

JavaScriptを使用して滑らかなスクロールをエミュレートしようとしています（多少なりとも）。私は私が欲しいものに非常に近いですが、私のロジックは現在、スクロールすることになっているセクションをスクロールしてウィンドウをスクロールさせます。をに戻し、最後にジャンプします。私はそれが使用しているsetTimeoutと関係があると思うが、私はそれを理解することはできない。

var linkToAnchor = document.querySelector('a[href="#section-2"]'); 
 
var anchor = document.querySelector('#section-2') 
 
linkToAnchor.onclick = function() { 
 
    var i = 0; 
 
    var distance = anchor.offsetTop - document.body.scrollTop; 
 
    console.log("distance to be scrolled: ", distance); 
 
    var pixelJump = 25; 
 
    (function loop() { 
 
    console.log("i: ", i); 
 
    //debugger; 
 
    console.log("current scrollTop: ", document.body.scrollTop) 
 
    if (i + pixelJump > distance) { 
 
     document.body.scrollTop = anchor.offsetTop; 
 
     console.log('its over') 
 
     return; 
 
    } 
 
    if (i > distance) return; 
 
    i += pixelJump; 
 
    scrollBy(0, pixelJump); 
 
    console.log("new scrollTop: ", document.body.scrollTop) 
 
    setTimeout(loop, 50); 
 
    })(); 
 
}

[class*="section-"] { 
 
    width: 500px; 
 
    height: 300px; 
 
    background-color: red; 
 
} 
 

 
.section-2 { 
 
    background-color: orange; 
 
}

<div class="section-1"> 
 
    SECTION 1 
 
    <a href="#section-2">link to section 2</a> 
 
</div> 
 
<div id="section-2" class="section-2"> 
 
    SECTION 2 
 
</div> 
 
<div class="section-3"> 
 
    SECTION 3 
 
</div>

ここではスクリプトからデバッグ出力の一部です：

distance: 308 
i: 0 
current scrollTop: 0 
new height: 25 
i: 25 
current scrollTop: 308 ##### WHY DOES THE SCROLLTOP JUMP TO 308 FROM 0?? #### 
new height: 333 
i: 50 
current scrollTop: 333 
new height: 358 
i: 75 
current scrollTop: 358 
new height: 383 

Answer 1

は自分自身でアンカーにスクロールからブラウザを停止するpreventDefaultを使用してください。ハッシュをhrefに保存します。これは、非jsユーザーのための優雅な後退です。

linkToAnchor.onclick = function(e) { 
    e.preventDefault(); 
    // .. 
};