// 記事内の画像エレメントをimgsに格納
const imgwrap = document.getElementById('article-wrap')
const imgs = Array.from(imgwrap.getElementByTagName('img'))

// imgs.lengthのマイナス2からループを開始することで最後の画像をタップしても何もしないことにする。
for(let i = imgs.length - 1; i--;) {
    imgs[i].addEventListener('click', x => {
        // 現在の縦の位置をピクセルで取得
        let cw = window.pageYOffset;
        // タップした画像の次の画像の位置を取得
        const ni = x.target.nextElementSibling.nextElementSibling.nextElementSibling.offsetTop
        , timer = setInterval(()=>{
        // 10だと遅く、30だとガタガタになったので20が丁度いい滑らかさだった。
        cw = cw + 20;
        // スクロールしていって現在位置が次の画像より低くなった場合は止めて位置をセットする
        if (cw > ni) {
            clearInterval(timer);
            cw = ni;
        }
        // 画像をスクロールしていく。
        window.scrollTo(0, cw);
        }, 1);
    });
}