# javascript  指定場所にスムーズにスクロールする方法

const scrollTo = (id: string) => {
  const offset = 200;
  const element = document.getElementById(id);
  if (element) {
    const topPosition = element.offsetTop - offset;
    window.scrollTo({ top: topPosition, behavior: "smooth" });
  }
};

Element.scrollTo()メソッドは、特定の要素内のコンテンツをスクロールするための JavaScript のメソッドです。このメソッドを使用することで、要素内のコンテンツを指定した座標や位置にスクロールすることができます。

構文

// スクロール位置を指定
element.scrollTo(x, y);

// ScrollToOptions プロパティ オブジェクト
element.scrollTo(options);

# ScrollToOptions

ScrollToOptions は、Element.scrollTo()メソッドに渡すことができるオプションを指定するためのオブジェクトです。このオブジェクトを使用することで、スクロールの動作や位置を詳細に制御することができます。

ScrollToOptions オブジェクトのプロパティ

  • top
    要素の垂直方向のスクロール位置を指定します。ピクセル単位で指定します。
  • left
    要素の水平方向のスクロール位置を指定します。ピクセル単位で指定します。
  • behavior
    スクロールのアニメーション動作を制御するためのオプションです。デフォルトはautoで、瞬時にスクロールします。smooth を指定すると、スクロールがスムーズにアニメーション化されます。

例文

var element = document.getElementById("myElement");

// オプションを指定せずにデフォルトのスクロール動作で要素までスクロール
element.scrollTo({ top: 0, left: 0 });

// オプションを指定して要素までスムーズにスクロール
element.scrollTo({ top: 200, left: 0, behavior: "smooth" });

# element.scrollIntoView(alignToTop)

指定された elementId に対応する要素を取得し、その要素までスムーズにスクロールします。scrollIntoView メソッドは、指定された要素が表示されるようにページを自動的にスクロールします。

scrollIntoView メソッドは、指定した要素が表示されるようにスクロールするための JavaScript の組み込みメソッドです。このメソッドは、要素が現在のビューポート内に表示されていない場合、自動的にスクロールして要素を表示領域内に持ってきます。

構文

element.scrollIntoView();

// 論理型の引数
element.scrollIntoView(alignToTop);

// オブジェクト型の引数
element.scrollIntoView(scrollIntoViewOptions);

alignToTop は、scrollIntoView メソッドのオプションの 1 つで、要素が表示された後にビューポート内での垂直位置を制御するためのBoolean値です。

例文

var element = document.getElementById("myElement");

// alignToTopがtrueの場合
element.scrollIntoView(true); // 要素がビューポートの上端に配置される

// alignToTopがfalseの場合
element.scrollIntoView(false); // 要素がビューポートの下端に配置される

alignToTop が true は既定値で:要素がビューポート内にスクロールされた後、要素の上端がビューポートの上端に合うようになります。つまり、要素がビューポートの上端に配置されます。scrollIntoViewOptions: {block: "start", inline: "nearest"} に相当します。

alignToTop が false の場合:要素がビューポート内にスクロールされた後、要素の下端がビューポートの下端に合うようになります。つまり、要素がビューポートの下端に配置されます。

# element.scrollIntoView(scrollIntoViewOptions)

scrollIntoViewOptions は、scrollIntoView メソッドのためのオプションを指定するためのオブジェクトです。このオブジェクトを使用することで、スクロールの動作や位置の制御を細かく設定することができます。

scrollIntoViewOptions のプロパティ

  • behavior
    スクロールのアニメーション動作を制御するためのオプションです。デフォルトはautoで、瞬時にスクロールします。smooth を指定すると、スクロールがスムーズにアニメーション化されます。
  • block
    垂直方向のスクロールを制御するためのオプションです。start center end nearestを指定できます。デフォルトはstartで、要素がビューポートの上端にスクロールされます。
  • inline
    水平方向のスクロールを制御するためのオプションです。start center end nearestを指定できます。デフォルトはnearestで、要素がビューポートの左端または右端にスクロールされます。

デフォルトのオプションを使用する場合は、element.scrollIntoView()という形式で呼び出すこともできます。

# scrollIntoView と scrollTo の違い

scrollIntoView と scrollTo は、どちらも要素のスクロールを制御するための JavaScript のメソッドですが、いくつかの違いがあります。

# 使用方法

scrollIntoView メソッド: 要素自体に直接 scrollIntoView メソッドを呼び出します。例: element.scrollIntoView()
scrollTo メソッド: window オブジェクトに対して scrollTo メソッドを呼び出します。例: window.scrollTo()

# 引数

scrollIntoView メソッド: オプション引数として、スクロールの挙動を制御する scrollIntoViewOptions オブジェクトを受け取ることができます。
scrollTo メソッド: 引数としてスクロール位置を指定するための座標、または x および y のプロパティを持つオブジェクトを受け取ることができます。例: window.scrollTo(x, y)または window.scrollTo({ top: x, left: y })

# スクロールの対象

scrollIntoView メソッド: 対象の要素をスクロールして表示するように設定します。要素がビューポート内に表示されるようにスクロールされます。
scrollTo メソッド: スクロール位置を指定して、ビューポート全体をスクロールします。具体的な座標を指定することで、ページ内の特定の位置にスクロールすることも可能です。

# スクロールのアニメーション

scrollIntoView メソッド: scrollIntoViewOptions オブジェクトの behavior プロパティを使用して、スクロールアニメーションを制御できます。"smooth"を指定することでスムーズなアニメーションスクロールが可能です。
scrollTo メソッド: ネイティブの動作ではアニメーションは提供されませんが、カスタムのアニメーション処理を組み合わせて使用することもできます。

scrollIntoView と scrollTo の違い

scrollIntoView メソッドは特定の要素をスクロールして表示するために使用され、要素自体に対して直接呼び出されます。一方、scrollTo メソッドはウィンドウ全体を対象として、指定した座標や要素までスクロールするために使用され、window オブジェクトに対して呼び出されます。また、scrollIntoView メソッドはスクロールアニメーションを提供するためのオプションを持っていますが、scrollTo メソッドはネイティブの動作ではアニメーションは提供されません。

2023-07-03
  • javascript

関連記事

Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
Jsconfig と Tsconfig
開発時によく使うゼロ埋めパディング作業まとめ
開発におけるコーディングルール・規約
react 強制的にレンダリングする方法
Cookie localStorage sessionStorage の違い
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
キーコード取得 & キーコード一覧
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
javascript 開発で出会った TypeError
ReferenceError: location is not defined
vuejs で omisejapan の決済フォーム作成した時のメモ
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
javascript reduce 連想配列の合計計算覚えよう
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript password generator ランダム文字列パスワード作成
javascript 日本語 shift-js 対応 CSV ダウンロード