【jQuery】一定時間経過で特定の位置までスクロール(読み込み完了後)【jQuery】一定時間経過で特定の位置までスクロール(読み込み完了後)2020.02.08Web制作Bこんにちは、ryohei(@ityryohei)です!本記事では、ページ読み込み完了後に一定時間が経過すると特定の位置までスクロールするjQueryのスクリプトをご紹介しています。下記は本記事でご紹介する内容のデモになります。Pen」をクリックして3秒ほどお待ちください。CodePen.いかがでしょうか。埋め込まれたページが動いて「1番」から「3番」のセクションまで自動的にスクロールされたかと思います。使用する場面としては、ページの読み込み完了後に数秒だけ強調したいキービジュアルやバナー等を表示して、その後にコンテンツ部分までスクロールする、などがありますね。デメリットとしては、ユーザーが意図しない動きとなるため、不快に思われる方がいるかもしれませんので、その点だけご了承いただければと思います!本記事の内容スクロール先を決める実際にスクロールする処理を記述する最後にでは、解説していきます。スクロール先を決めるスクリプトを記述する前にHTMLでスクロール先を決めておきます。下記のサンプルでは上から「3番」目にあるsectionタグをスクロール先にしています。id属性を指定して、そこにアンカーでスクロールするイメージになります。id名はお好きなものに変更してください。使い慣れた命名にしていただければと思います。</section></main>実際にスクロールする処理を記述する続いてjQueryでスクリプトを記述していきます。});かなり短い記述なのですが、簡単に補足を!変数「delayTime」には自動的にスクロールするまでの時間を、「position」にはスクロールが停止する要素を指定します。他はそのままご使用いただければと思います。最後にいかがでしたでしょうか。自動的にスクロールする処理は読み込み完了時だけでなく他の場面でも有効かと思いますの。これから制作される多くのサイトに取り入れていただければ幸いです。Webエンジニアご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。