ある地点までスクロールすると少し先まで自動でスクロールされるようにしたい

Question

前提・実現したいこと

ウェブサイト上で
スクロールに連動したアニメーションを作成しました。

このアニメーションが中途半端な位置で止まらないように、
アニメーションの着火地点までスクロールしたら、アニーメーション終了まで自動でスクロールされるように実装をしたいです。

<section class="section">
    <div class="box01 box">
        <div class="box_inner">
             <div id="link"><a class="sample1" onclick="sample1()">ここをクリックすると、スクロール位置がY方向に100vh移動します。</a></div>
            <p>シーン1</p>
        </div>
    </div>
    <div class="box02 box">
        <div class="box_inner">
            <p>シーン2</p>
        </div>
    </div>
    <div class="box03 box">
        <div class="box_inner">
            <p>シーン3</p>
        </div>
    </div>
</section>

.section {
    height:100vh;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}


.box {
    width: 100%;
    height: 100vh;
}

#link{
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 99999;
}

function sample1() {
        var height = $(window).height();
        window.scrollBy(0, height);
    }

例えば、.box01の真ん中までスクロールをすると、
自動で.box02の真ん中まで自動でスクロールされるようなイメージです。

逆にいうと.box01の真ん中から.box02の真ん中の間では止まれないようにしたいです。

試したこと

相対位置での指定をしたいので、
scrollByメソッドを用いてスムーススクロールすれば良いかと思ったのですが、

スムーズスクロールする

「表示領域に入ったら（例で言う.box01の真ん中までいったら）scrollByを発火する」と言う方法と
「スムーススクロールする」と言う方法が
がわからず困っております。。。

検索をしてもなかなか出てこず、ヒントだけでもいただけますと
大変助かります。
ご存知の方がいらっしゃいましたら、ご教授いただけますと幸いです。

よろしくお願い致します。

Comments

[Lhankor_Mhy]

スクロールスナップではダメでしたか？

[kii.32]

先ほどの件はありがとうございました！
スクロールスナップですと、セクションの頭までの移動になってしまい、
セクションの真ん中等移動したい位置を決めれないので、こちらの方法を再度検討しております。

[Lhankor_Mhy]

私見ですが、セクションの真ん中でスナップすることは可能だと思います。
ですが、細かい調整が必要、ということなのですよね？　方針は了解いたしました。

Answer 1

scrollTop を使うのはいかがですか？
Element.scrollTop - Web API | MDN

あまり細かい調整が必要ないのであれば、scrollIntoView() もいいかもしれません。
Element.scrollIntoView() - Web API | MDN

Comments

[kii.32]

ありがとうございます！

scrollToを使おうと思い下記のように追記したのですが、
何が悪いかわかりますでしょうか？

//.box01の真ん中までいったら100vh進む

$(window).scroll(function() {
var top = $(". box01").offset().top; // ターゲットの位置取得
var position = top - $(window).height(); // 発火させたい位置

var height = $(window).height();
window.scrollTo(0, height);

if ($(window).scrollTop() > position) {
return;
} else {
return false;
}
})

[Lhankor_Mhy]

この場合、
return;
と
return false;
に、差はないと思います。

なので、条件文が成立してもしなくても、動作は変わらないように見えます。

[kii.32]

そうなんですね。。。
もう少し勉強しながら進めてみます！
ありがとうございます！