requestAnimationFrameで垂直方向に長いコンテンツを含むDivをスクロール

2024-05-09

jQuery でページ読み込み時に Div の一番下へスクロール

このチュートリアルでは、jQuery を使用して、ページ読み込み時に特定の Div の一番下へ自動的にスクロールする方法を説明します。

必要なもの

jQuery ライブラリ
HTML ファイル

手順

HTML ファイルに Div を作成する

まず、スクロールしたい Div を HTML ファイルに作成する必要があります。以下は例です。

<div id="myDiv">
  </div>

jQuery コードを追加する

次に、jQuery コードを使用して、ページ読み込み時に Div の一番下へスクロールします。以下は例です。

$(document).ready(function(){
  $("#myDiv").animate({ scrollTop: $(document).height() }, 1000);
});

このコードは、以下のことを行います。

$(document).ready(function(){}): ページ読み込み完了後に実行される関数を定義します。
$("#myDiv"): ID が "myDiv" の Div を選択します。
.animate({ scrollTop: $(document).height() }, 1000): 選択した Div を 1 秒かけて一番下へスクロールします。

オプション

スクロール速度を調整するには、1000 を任意の値に変更します。

例

以下の例では、ページ読み込み時に "myDiv" という ID の Div を一番下へスクロールし、2 秒かけて滑らかにスクロールします。

<div id="myDiv">
  </div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#myDiv").animate({ scrollTop: $(document).height() }, 2000, 'easeInOutSine');
});
</script>

補足

この方法は、ページの高さが可変の場合にのみ機能します。ページの高さが固定の場合、Div は常に一番下になります。
垂直方向に長いコンテンツを含む Div をスクロールする場合、この方法を使用すると、ユーザーがコンテンツ全体を簡単に見渡せるようになります。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQuery で Div の一番下へスクロール</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
    <h1>jQuery で Div の一番下へスクロール</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis eget ante mollis tristique. Nunc et mauris eget quam tincidunt ullamcorper. Sed euismod, orci eget rhoncus pharetra, mauris nisl tristique elit, in aliquet velit quam eget nibh. Donec sed neque euismod, semper velit ac, tincidunt magna. Fusce et ligula eget lorem semper tincidunt. Morbi ac felis eget ante hendrerit aliquam. Sed sed ipsum ut magna feugiat malesuada. Phasellus non enim mauris, sit amet pretium enim laoreet eget.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis eget ante mollis tristique. Nunc et mauris eget quam tincidunt ullamcorper. Sed euismod, orci eget rhoncus pharetra, mauris nisl tristique elit, in aliquet velit quam eget nibh. Donec sed neque euismod, semper velit ac, tincidunt magna. Fusce et ligula eget lorem semper tincidunt. Morbi ac felis eget ante hendrerit aliquam. Sed sed ipsum ut magna feugiat malesuada. Phasellus non enim mauris, sit amet pretium enim laoreet eget.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis eget ante mollis tristique. Nunc et mauris eget quam tincidunt ullamcorper. Sed euismod, orci eget rhoncus pharetra, mauris nisl tristique elit, in aliquet velit quam eget nibh. Donec sed neque euismod, semper velit ac, tincidunt magna. Fusce et ligula eget lorem semper tincidunt. Morbi ac felis eget ante hendrerit aliquam. Sed sed ipsum ut magna feugiat malesuada. Phasellus non enim mauris, sit amet pretium enim laoreet eget.</p>
    <div id="myDiv">
      <p>この Div はページ読み込み時に一番下へスクロールされます。</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis eget ante mollis tristique. Nunc et mauris eget quam tincidunt ullamcorper. Sed euismod, orci eget rhoncus pharetra, mauris nisl tristique elit, in aliquet velit quam eget nibh. Donec sed neque euismod, semper velit ac, tincidunt magna. Fusce et ligula eget lorem semper tincidunt. Morbi ac felis eget ante hendrerit aliquam. Sed sed ipsum ut magna feugiat malesuada. Phasellus non enim mauris, sit amet pretium enim laoreet eget.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed turpis eget ante mollis tristique. Nunc et mauris eget quam tincidunt ullamcorper. Sed euismod, orci eget rhoncus pharetra, mauris nisl tristique elit, in aliquet velit quam eget nibh. Donec sed neque euismod, semper velit ac, tincidunt magna. Fusce et ligula eget lorem semper tincidunt. Morbi ac felis eget ante hendrerit aliquam. Sed sed ipsum ut magna feugiat malesuada. Phasellus non enim mauris, sit amet pretium enim laoreet eget.</p>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

CSS

body {
  font-family: sans-serif;
}

#container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
}

jQuery 以外にも、ページ読み込み時に Div の一番下へスクロールする方法があります。以下に、いくつかの方法をご紹介します。

JavaScript のネイティブコードを使用する

window.onload = function() {
  var myDiv = document.getElementById('myDiv');
  myDiv.scrollTop = myDiv.scrollHeight;
};

CSS の scroll-behavior プロパティを使用する

#myDiv {
  scroll-behavior: auto;
}

この CSS コードは、myDiv という ID の Div をページ読み込み時に自動的に一番下へスクロールします。

requestAnimationFrame API を使用する

window.requestAnimationFrame(function() {
  var myDiv = document.getElementById('myDiv');
  myDiv.scrollTop = myDiv.scrollHeight;
});

シンプルでわかりやすい方法 を求めている場合は、jQuery を使用するのが良いでしょう。
jQuery を使用したくない 場合は、JavaScript のネイティブコード または CSS の scroll-behavior プロパティ を使用することができます。
パフォーマンスが重要な場合 は、requestAnimationFrame API を使用するのが良いでしょう。

jquery html