[解決済み] jQueryを使用しないスムーズスクロール

質問

プラグインやフレームワークの干渉を受けず、UIに生のJavaScriptコードのみを使用したいページをコーディングしています。

そして今、jQueryなしでスムーズにページ上をスクロールする方法を見つけるのに苦労しています。

どのように解決するのですか？

次のことを試してみてください。 スムーズスクロールデモ のようなアルゴリズム、あるいは

1. 現在のトップの位置を self.pageYOffset
2. スクロールしたい場所までの要素の位置を取得します。 element.offsetTop
3. その位置に到達するために、for ループを実行します。これはかなり速いでしょうし、タイマーを使ってその位置まで滑らかにスクロールさせることもできます。 window.scrollTo

こちらもご覧ください。 その他のよくある回答 をご覧ください。

アンドリュー・ジョンソンのオリジナルコードです。

function currentYPosition() {
    // Firefox, Chrome, Opera, Safari
    if (self.pageYOffset) return self.pageYOffset;
    // Internet Explorer 6 - standards mode
    if (document.documentElement && document.documentElement.scrollTop)
        return document.documentElement.scrollTop;
    // Internet Explorer 6, 7 and 8
    if (document.body.scrollTop) return document.body.scrollTop;
    return 0;
}


function elmYPosition(eID) {
    var elm = document.getElementById(eID);
    var y = elm.offsetTop;
    var node = elm;
    while (node.offsetParent && node.offsetParent != document.body) {
        node = node.offsetParent;
        y += node.offsetTop;
    } return y;
}


function smoothScroll(eID) {
    var startY = currentYPosition();
    var stopY = elmYPosition(eID);
    var distance = stopY > startY ? stopY - startY : startY - stopY;
    if (distance < 100) {
        scrollTo(0, stopY); return;
    }
    var speed = Math.round(distance / 100);
    if (speed >= 20) speed = 20;
    var step = Math.round(distance / 25);
    var leapY = stopY > startY ? startY + step : startY - step;
    var timer = 0;
    if (stopY > startY) {
        for ( var i=startY; i<stopY; i+=step ) {
            setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
            leapY += step; if (leapY > stopY) leapY = stopY; timer++;
        } return;
    }
    for ( var i=startY; i>stopY; i-=step ) {
        setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
        leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
    }
}

関連リンク

• https://www.sitepoint.com/smooth-scrolling-vanilla-javascript/
• https://github.com/zengabor/zenscroll/blob/dist/zenscroll.js
• https://github.com/cferdinandi/smooth-scroll/blob/master/src/js/smooth-scroll.js
• https://github.com/alicelieutier/smoothScroll/blob/master/smoothscroll.js