ページをまたいで
スムーススクロール違うページのコンテンツでも
その位置へまで
スムーススクロール

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

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

普通は、表示したいコンテンツにはIDを付与し（いわゆるアンカー）、そのアンカー名に”＃”を付けてa要素のhref属性へリンクとして指定します。
しかし、この方法では当該コンテンツはページ遷移先で表示されますが、スムーススクロールはされません。JSで処理する前にブラウザが当該コンテンツを表示してしまうためです。
そのため、このアンカー名をJSが取得できるように他の方法で記述します。
ひとつの方法として、引数にキーと値のセットを設定します。
HTMLには、遷移先のHTML名と？の後に引数のセットを設定します。キー名を仮に”scrollto”とします。
HTMLは下記のようになります。

<a href="./?scrollto=cl2">別ページでもスムーススクロール</a>

今度は当該コンテンツを含むページの処理です。
大事なことは、スムースススロールさせたいコンテンツを含むページを起動させる時、他ページからのリクエストがあるのかないのかを必ずチェックする必要がるということです。

●getPrmモジュール
下記コードでURLに引数があるかないかを判定します。

const getPrm = (key, url = location.href) => {
  try {
    return new URL(url).searchParams.get(key);
  } catch {
    return null;
  }
};
export {getPrm};

欲しい引数のパラメータscrolltoをgetPrmモジュールへ設定します。
するとscrolltoの値（この場合は"cl2"）がリクエストとして取得されます。

const prm= getPrm('scrollto');//prm: cl2

取得したリクエストの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'});

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

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