【jQuery】一定時間経過で特定の位置までスクロール（読み込み完了後）

こんにちは、Ryohei（@ityryohei）です！

本記事では、ページ読み込み完了後に一定時間が経過すると特定の位置までスクロールするjQueryのスクリプトをご紹介しています。

下記は本記事でご紹介する内容のデモになります。動きを確認される場合は「Run Pen」をクリックして3秒ほどお待ちください。

See the Pen
Scroll to anchor after loading is complete｜jQuery by ryohei (@intotheprogram)
on CodePen.

いかがでしょうか。

埋め込まれたページが動いて「1番」から「3番」のセクションまで自動的にスクロールされたかと思います。

使用する場面としては、ページの読み込み完了後に数秒だけ強調したいキービジュアルやバナー等を表示して、その後にコンテンツ部分までスクロールする、などがありますね。

デメリットとしては、ユーザーが意図しない動きとなるため、不快に思われる方がいるかもしれませんので、その点だけご了承いただければと思います！

では、解説していきます。

スクロール先を決める

スクリプトを記述する前にHTMLでスクロール先を決めておきます。

下記のサンプルでは上から「3番」目にあるsectionタグをスクロール先にしています。id属性を指定して、そこにアンカーでスクロールするイメージになります。id名はお好きなものに変更してください。使い慣れた命名にしていただければと思います。

HTML

<main>
    <section>
        <h1>1</h1>
    </section>
    
    <section>
        <h1>2</h1>
    </section>
    
    <section id="elem">
        <h1>3</h1>
    </section>
    
    <section>
        <h1>4</h1>
    </section>
    
    <section>
        <h1>5</h1>
    </section>
</main>

実際にスクロールする処理を記述する

続いてjQueryでスクリプトを記述していきます。

JS

$(window).on('load', function(){

    var delayTime = 3000;
    var position = $('#elem').offset().top;
    
    $("html, body").delay(delayTime).animate({ scrollTop: position }, 1000);
    
});

かなり短い記述なのですが、簡単に補足を！
変数「delayTime」には自動的にスクロールするまでの時間を、「position」にはスクロールが停止する要素を指定します。他はそのままご使用いただければと思います。

最後に

いかがでしたでしょうか。

自動的にスクロールする処理は読み込み完了時だけでなく他の場面でも有効かと思いますの。これから制作される多くのサイトに取り入れていただければ幸いです。

以上、ページ読み込み完了後に一定時間が経過すると特定の位置までスクロールするjQueryスクリプトのご紹介でした！