はじめに
前回画面スクロールの処理について書いてみましたが、ページ遷移前の画面のスクロール場所を保持し、
元のページに戻った際に先ほどの画面位置にスクロールする実装を行ったので備忘録として残しておきます。
(コメントで教えていただいたソースコードを使用させていただき、若干修正しております。
ありがとうございます！)
| 環境 | |
|---|---|
| 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だけで完結するので、実装しやすかったです。
参考文献
この記事は以下の情報を参考にさせていただきました。