はじめに

前回画面スクロールの処理について書いてみましたが、ページ遷移前の画面のスクロール場所を保持し、
元のページに戻った際に先ほどの画面位置にスクロールする実装を行ったので備忘録として残しておきます。
(コメントで教えていただいたソースコードを使用させていただき、若干修正しております。
ありがとうございます！)

環境
OS	Windows10 22H2
エディター	Visual Studio Code

やりたいこと

編集ボタンを押下し、修正が完了した後、
一覧画面で先ほど押下した時点での画面位置にスクロールさせたい。

①編集ボタンを押下

②編集画面にページ遷移するので、修正して修正ボタンを押下

③一覧画面に戻るときに、先ほどの画面位置までスクロールさせたい

実装方法

編集ボタンのidを "modify_btn" としています。
クリックされた要素のidがmodify_btnのとき、
スクロール位置をsessionStorageに保存しています。

index.ejs

<form action="/modify" method="GET">
    <input type="hidden" name="default_taskid" value="<%= result.id %>" />
    <input type="hidden" name="default_task" value="<%= result.content %>" />
    <input type="hidden" name="default_date" value="<%= result.date %>" />
    <input type="hidden" name="default_time" value="<%= result.time %>" />
    <input class="btn btn-primary" type="submit" value="編集" id="modify_btn" />
</form>

<script>
window.addEventListener('load', loadFinished);
function loadFinished() {
    var OffsetTop = sessionStorage.getItem("OffsetTop");
    window.scroll({
        top: OffsetTop,
        behavior: 'smooth',

    // sessionStorage削除
    sessionStorage.removeItem("OffsetTop");
}

document.addEventListener('click', event => {
    if (event.target.id === 'modify_btn') {
        //スクロール位置取得
        var location = window.pageYOffset;
        // sessionStorageに保存する
        sessionStorage.setItem('OffsetTop', location);
    }
});
</script>

最後に

この実装方法だと、JavaScriptだけで完結するので、実装しやすかったです。

参考文献

この記事は以下の情報を参考にさせていただきました。