ページをまたいでスムーススクロール

Top›labo›

Smooth Scroll To An Anchor Across Pages

メニューをクリックすると別ページのコンテンツでもスムーススクロールで表示させる

| 2026/01/21

要件
定義

『ページをまたいでスムーススクロール』の要件定義

ページをまたいだリンクは通常動作
同じページ内で特定のコンテンツを表示させる時、現在では、CSSのscroll-behavior: smooth;を使うことでスムーススクロールさせることができます。JSを使うとさらに細かな制御が可能です。しかし、別のページのコンテンツの場合、スムーススクロールではなくていきなり当該コンテンツが表示されます。別にUI的には問題ありませんが、感覚的には別のページへ遷移したという感じがしないのと、なにより、心地よさがありません。
そこで、今回のテーマ『ページを跨いでスムーススクロール』とは、別ページへ遷移しつつ、リンクされたコンテンツの特定位置へ滑らかに表示させることになります

考え方

ステップに分割して考える

Javascriptの処理を3段階のステップで考える
ページをまたぐスムーススクロールを考える場合、いくつかのステップに分けるとプログラミングしやすくなります。
①最初のJSの処理：スムーススクロール表示したいコンテンツのIDをリンクへ設定する。クリックすると当該ページへ遷移します。
②二番目のJSの処理：当該コンテンツを含むページを表示する時、どのコンテンツをスムーススクロールさせるのかリクエストを取得する。
③最後のJSの処理：取得したIDのコンテンツをスムーススクロールさせる
と三つのJSによる処理が必要になります。

コード
解説

各ステップのコードと解説

1.スムーススクロール表示したいコンテンツのIDをリンクへ設定する。
普通は、表示したいコンテンツにはIDを付与し（いわゆるアンカー）、そのアンカー名に”＃”を付けてa要素のhref属性へリンクとして指定します。
しかし、この方法では当該コンテンツはページ遷移先で表示されますが、スムーススクロールはされません。JSで処理する前にブラウザが当該コンテンツを表示してしまうためです。※JSでリセットして無理やりスクロールさせる方法もあります。が、あまり意味がないので別の機会に紹介します。

というわけで、このアンカー名をJSが取得できるように他の方法で記述します。
ひとつの方法として、引数にキーと値のセットを設定します。
HTMLには、遷移先のHTML名と？の後に引数のセットを設定します。キー名を仮に”scrollto”とします。
HTMLは下記のようになります。
```
<a href="./?scrollto=cl2">別ページでもスムーススクロール</a>
```
2.当該コンテンツを含むページを表示する時、どのコンテンツをスムーススクロールさせるのかリクエストを取得する。
今度は当該コンテンツを含むページの処理です。
大事なことは、スムースススロールさせたいコンテンツを含むページを起動させる時、他ページからのリクエストがあるのかないのかを必ずチェックする必要がるということです。

●getPrmモジュール
下記コードでURLに引数があるかないかを判定します。
```
const getPrm = (key, url = location.href) => {
  try {
    return new URL(url).searchParams.get(key);
  } catch {
    return null;
  }
};
export {getPrm};
```
URLから必要なキーの値を取得する
欲しい引数のパラメータscrolltoをgetPrmモジュールへ設定します。
するとscrolltoの値（この場合は"cl2"）がリクエストとして取得されます。
```
const prm= getPrm('scrollto');//prm: cl2
```
3.取得したIDのコンテンツをスムーススクロールさせる。
取得したリクエストのIDがページ内のコンテンツIDに該当するかを判定し、あればその要素のY座標を取得し、その座標までスクロールさせます。
//orderはリクエストされたID値
//Yはスクロールすべき値
//サンプルはターゲット要素の高さだけを計算してますが、状況に応じてヘッダの高さとか現在のYスクロール値とかも計算する必要があります。
```
const target= document.getElementById(order);
const Y = Math.round(target.getBoundingClientRect().top) ;
```
スクロールさせる
上記で取得したY値を下記の式のHへ代入するとスムーススクロールします。
```
window.scroll( {top: H, behavior: 'smooth'});
```

サン
プル

ページをまたいでスムーススクロールの実働サンプル

1.メインとサブの2ページ構成のサンプルです。
サンプルは下層ページを想定したlower.htmlになります。このページのメニューの各リンクをクリックすると大元のindex.htmlへ遷移し該当コンテンツまでスク―ススクロールされます。

ページをまたいでスムーススクロールの実働サンプル：https://labo.studio-happyvalley.com/pageScroll/base/lower.html