HTMLでページをリフレッシュすると同じ位置に戻る問題の解決方法

2024-02-09 04:19 HTML ページリフレッシュ スクロール位置

  1. JavaScriptを使用してスクロール位置を保存する方法: このアプローチでは、JavaScriptを使ってスクロール位置を保存し、リフレッシュ後にそれを復元します。

    <!DOCTYPE html>
<html>
<head>
 <script>
   window.onload = function() {
     var scrollPos = sessionStorage.getItem('scrollPosition');
     if (scrollPos !== null) {
       window.scrollTo(0, scrollPos);
       sessionStorage.removeItem('scrollPosition');
     }
   };
   window.onbeforeunload = function() {
     sessionStorage.setItem('scrollPosition', window.pageYOffset);
   };
 </script>
</head>
<body>
 <!-- ページの内容 -->
</body>
</html>

  2. URLのフラグメント識別子を使用する方法: ページのURLにフラグメント識別子を追加し、リフレッシュ後にその識別子を取得してスクロール位置を復元します。

    <!DOCTYPE html>
<html>
<head>
 <script>
   window.onload = function() {
     var fragment = window.location.hash;
     if (fragment) {
       var target = document.querySelector(fragment);
       if (target) {
         target.scrollIntoView();
       }
     }
   };
 </script>
</head>
<body>
 <!-- ページの内容 -->
</body>
</html>

  3. サーバーサイドのセッションストレージを使用する方法: サーバーサイドのセッションストレージを使ってスクロール位置を保存し、リフレッシュ後にそれを復元します。具体的な実装は使用しているサーバーサイド言語に依存します。