scrollTopが0になるのはなぜですか？

Webページをスクロールすると、ブラウザウィンドウの上端から要素までの距離が変化します。この距離をプログラムで取得するために、JavaScriptでは `scrollTop` プロパティを使用します。

scrollTop プロパティについて

`scrollTop` プロパティは、要素のスクロール可能な領域の一番上から、要素の表示領域の一番上までの距離をピクセル単位で返します。

要素の内容がスクロールバーを必要としないほど短い場合、`scrollTop` は0になります。
要素の内容がスクロールバーを必要とするほど長く、スクロールしていない場合も、`scrollTop` は0になります。
要素を下にスクロールすると、`scrollTop` の値は増加します。

scrollTopが0になるケース

`scrollTop` の値が0になる主なケースは以下の通りです。

ケース	説明
要素の内容が短い	要素の内容がスクロールバーを必要としないほど短い場合、`scrollTop` は常に0になります。
ページがスクロールされていない	ページをスクロールしていない場合、`scrollTop` は0になります。これは、要素の表示領域の一番上が、スクロール可能な領域の一番上と一致しているためです。
スクロール位置が先頭	ページをスクロールした後、JavaScript などを使用してスクロール位置を先頭に戻した場合、`scrollTop` は0になります。

HTMLとJavaScriptの例

以下の例では、`div` 要素を作成し、その中に長いテキストを配置しています。スクロールボタンをクリックすると、`div` 要素を一番上までスクロールし、`scrollTop` の値をコンソールに出力します。


<!DOCTYPE html>
<html>
<head>
<style>
#container {
  height: 200px;
  overflow-y: scroll;
  border: 1px solid black;
}
</style>
</head>
<body>

<div id="container">
  <p>長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。</p>
</div>

<button onclick="scrollToTop()">一番上へスクロール</button>

<script>
function scrollToTop() {
  document.getElementById('container').scrollTop = 0;
  console.log("scrollTop:", document.getElementById('container').scrollTop);
}
</script>

</body>
</html>

参考資料

Element.scrollTop - Web API | MDN

よくある質問

Q1: `scrollTop` が正しく取得できない場合はどうすればよいですか？

A1: `scrollTop` を取得する前に、要素が完全に読み込まれていることを確認してください。`DOMContentLoaded` イベントや `window.onload` イベント内で `scrollTop` を取得することで、要素が完全に読み込まれた後に値を取得できます。

Q2: `scrollTop` を使用してスムーズスクロールを実装するにはどうすればよいですか？

A2: `scrollTop` を直接操作する代わりに、`element.scrollIntoView()` メソッドや JavaScript ライブラリを使用することで、スムーズスクロールを実装できます。

Q3: `scrollTop` はすべてのブラウザでサポートされていますか？

A3: `scrollTop` は、主要なすべてのブラウザでサポートされています。

その他の参考記事:jquery スクロール位置