JavaScriptで書く、要素のサイズ取得とスクロール

こんにちは、ナカムラです。
新人研修用に要素のサイズ取得について書きたいと思います。
今回は要素の高さを取得し、その要素の半分の高さにスクロールするボタンを作りました。
50%の位置がわかりやすいように、CSSで背景の色を変えています。

アンカーリンクにできるときはその方が良いですが、大きな画像の特定の位置へスクロールさせたい場合など、idをつけるのが難しい場合などに使えるかと思います。

DEMO

// 要素の高さを取得する
const elm = document.getElementById('contents')
const elmHeight = elm.clientHeight

contentsを取得し、clientHeightプロパティの情報を変数elmHeightに挿入します。

要素の高さを取得できるプロパティは、2つあります。
・clientHeight：コンテンツ領域とpaddingまでのサイズ
・offsetHeight：コンテンツ領域とpadding、borderまでのサイズ

今回はborderを設定していないのでclientHeightを使いました。
幅の場合はclientWidth、offsetWidthがあり、取得するサイズの仕様は高さと同じで、borderを入れるかどうかです。

// 要素の高さの半分を変数に入れる
const position = elmHeight * 0.5

elmHeightの50%なので、0.5をかけて変数positionへ挿入します。
これでスクロールの準備ができました。

// ボタンを取得し、クリックされたらスクロールする
const btn = document.getElementById('btn')
btn.addEventListener('click', function(){
  window.scrollTo(0,position)
})

btnを取得し、addEventListenerでクリックしたときのイベント処理を書いていきます。
スクロール移動の処理はこちら

window.scrollTo(0,position)

scrollToは初めにX値、2番目にY値を記述します。
今回X値は移動させないので0にし、Y値には先ほど準備したpositionをセットします。

scrollTo(X値,Y値)

スクロール移動にも種類があります。
・scrollTo：指定した位置へスクロールする
・scrollBy：現在いる位置から指定した数値分移動する（相対的な位置になる）

今回は要素のサイズをご紹介しましたが、ウィンドウのサイズも取得できます。

・window.innerWidth
・window.innerHeight
bodyなどの表示領域の部分の幅と高さを取得できます。

・window.outerWidth
・window.outerHeight
ブラウザ全体（外枠まで含む）の幅と高さを取得できます。

用途に合わせて使い分けてください。