title: HTML CSS & JAVASCRIPT Doesn't Work as Coded When Returning to a Page After Pressing the Back Arrow Button on the Browser
body: <p>The HTML, CSS, and JAVASCRIPT all work as I would like them to. That is until I return to the same page after pressing the back arrow on my browser (I'm currently using Google chrome). For example: when I have the menu bar open on the smartphone browser it stays in one position on the screen as I'd like it to. However, if I return to that page with the menu bar open, the top portion (where the X button is) moves up the screen if I scroll down.</p>
  <p>Can you help me fix it so that the code I'm using stays exactly the same even after I go back to the same page after using the back and forward button on my browser?</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en; jp;&quot;&gt;     
      
  &lt;body style=&quot;background-color: white; font-family: sans-serif;&quot;&gt;
        
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      
  &lt;title&gt;Koizumi・Home Page&lt;/title&gt;
        
  &lt;div class=&quot;page-wrap&quot;&gt;
       
  &lt;div class=&quot;cp_cont&quot;&gt;
  &lt;input id=&quot;cp_toggle03&quot; type=&quot;checkbox&quot;/&gt;
  &lt;div class=&quot;cp_mobilebar&quot;&gt;
  &lt;label for=&quot;cp_toggle03&quot; class=&quot;cp_menuicon&quot;&gt;
  &lt;span&gt;&lt;/span&gt;
  &lt;/label&gt;
  &lt;/div&gt;
  &lt;label id=&quot;h-menu_black&quot; class=&quot;cp_toggle03&quot; for=&quot;cp_menuicon&quot;&gt;&lt;/label&gt;
  &lt;div id=&quot;body&quot; class=&quot;noscroll&quot;&gt;&lt;/div&gt;
          
  &lt;header class=&quot;cp_offcm03&quot;&gt;
          
  &lt;nav&gt;
  &lt;ul style=&quot;text-align: center; margin-left: 210px; overflow: hidden;&quot;&gt;
              
  &lt;li style=&quot;border-bottom: .05px solid lightgray;&quot;&gt;&lt;a href=&quot;Website_Home_Page_English.html&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li style=&quot;border-bottom: .05px solid lightgray;&quot;&gt;&lt;a href=&quot;Website_Blog_English.html&quot;&gt;Blog&lt;/a&gt;&lt;/li&gt;
  &lt;li style=&quot;border-bottom: .05px solid lightgray;&quot;&gt;&lt;a href=&quot;Website_Koizumi_English.html&quot;&gt;About Koizumi&lt;/a&gt;&lt;/li&gt;
  &lt;li style=&quot;border-bottom: .05px solid lightgray;&quot;&gt;&lt;a href=&quot;Bibliography_English.html&quot;&gt;Bibliography&lt;/a&gt;&lt;/li&gt;
      
  &lt;div class=&quot;searchbar&quot;&gt; 
              
  &lt;form id=&quot;frmSearch&quot; class=&quot;search2&quot; method=&quot;get&quot; action=&quot;default.html&quot; style=&quot; padding-right: 10px; padding-top: 20px; text-align: right; position: inline;&quot;/&gt;
  &lt;input class=&quot;search2&quot; id=&quot;txtSearch&quot; type=&quot;text&quot; name=&quot;serach_bar&quot; size=&quot;31&quot; maxlength=&quot;255&quot; value=&quot;&quot; style=&quot;center: 396px; top: 185px; width: 180px; height: 26px;&quot;/&gt;
  &lt;input class=&quot;search1&quot; type=&quot;submit&quot; name=&quot;submition&quot; value=&quot;Search&quot; style=&quot; padding-  
  bottom:20px; left: 0px; top: 153px; height: 25px; width: 46px;&quot;/&gt;
  &lt;input class=&quot;search2&quot; type=&quot;hidden&quot; name=&quot;sitesearch&quot; value=&quot;default.html&quot;/&gt;    
      
  &lt;/div&gt;
      
  &lt;script type=&quot;text/javascript&quot;&gt;
   document.getElementById('frmSearch').onsubmit = function() {
   window.location = 'http://www.google.com/search?q=site:yoursitename.com ' + document.getElementById('txtSearch').value;
          return false;
      }
      
   document.getElementById('cp_toggle03').onchange = function() {
   if (document.getElementById('cp_toggle03').checked) {
   document.body.style.overflow = &quot;hidden&quot;;
    } else {
   document.body.style.overflow = &quot;&quot;;
    }
  }    
      
  &lt;/script&gt;
      &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;/header&gt;
      &lt;/div&gt;
      &lt;/div&gt;
          
  &lt;br&gt;&lt;br&gt;&lt;div class=&quot;image&quot; style=&quot;margin: 10px;&quot;&gt;
      
  &lt;a href=&quot;Website_JapanTravel_English.html&quot;&gt;&lt;img src=&quot;photos/Home_Page/Travel/Homepage_Travel_English.jpg&quot; alt=&quot;Travel&quot; width=&quot;85%&quot;&gt;&lt;/a&gt;
      
  &lt;div class=&quot; responsive-image-container&quot;&gt;&lt;a href=&quot;photos/Blog/Japanese_Culture/Blog/yokai/yokai_English.html&quot;&gt;&lt;img src=&quot;photos/Home_Page/Yokai/Homepage_yokai_English.jpg&quot; alt=&quot;Yokai&quot; width=&quot;42.4%&quot;&gt;&lt;/a&gt; &lt;a href=&quot;photos/Links/Kansai/Kansai_html_photos/Kyoto_html_photo/Kyoto/Blog/Kongoji/Kongoji_html_photo/Kongoji_English.html&quot;&gt;&lt;img src=&quot;photos/Home_Page/Kongoji/Kongoji_homepage_English.jpg&quot; alt=&quot;Kongoji&quot; width=&quot;42.4%&quot;&gt;&lt;/a&gt;
  &lt;/div&gt;
      
  &lt;div class=&quot; responsive-image-container&quot;&gt;&lt;a href=&quot;photos/Links/Kanto/Kanto_html_photos/Saitama_html_photos/Saitama/Blog/Tamagawa_Onsen/Tamagawa_Onsen_html_photo/Tamagawa_Onsen_English.html&quot;&gt;&lt;img src=&quot;photos/Home_Page/Tamagawa_Onsen/Homepage_Tamagawa_Onsen_English.jpg&quot; alt=&quot;Tamagawa_Onsen&quot; width=&quot;42.4%&quot;&gt;&lt;/a&gt; &lt;a href=&quot;Website_Koizumi_English.html&quot;&gt;&lt;img src=&quot;photos/Home_Page/About_Koizumi/Homepage_Koizumi_English.jpg&quot; alt=&quot;Koizumi&quot; width=&quot;42.4%&quot;&gt;&lt;/a&gt;
  &lt;/div&gt;
      
  &lt;br&gt;&lt;br&gt;&lt;footer class=&quot;site-footer&quot; style=&quot;font-size: 12px;&quot;&gt;小泉© | &lt;a href=&quot;Website_Home_Page.html&quot;&gt;日本語&lt;/a&gt;&lt;/footer&gt;&lt;/div&gt;
        
  &lt;style&gt;
      
   .searchbar{float: right;}
      
   .image{text-align: center;}
      
   .setsumei{margin-left: 20px;
             margin-right: 20px;}
      
   .footer{width: 100%; 
             height: 40px; 
             text-align: center;
             border-top: 1px solid black; 
             position: absolute;
             bottom: 0;
             padding: 10px;}
      
   .page-wrap {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -40px; 
  }
  
   .page-wrap:after {
    content: &quot;&quot;;
    display: block; 
    }
  
   .site-footer, .page-wrap:after {
    /* .push must be the same height as footer */
    height: 30px; 
  }
  
   .site-footer {
    text-align: center;
    border-top: 1px solid black;
    padding: 10px;
  }
      
      
  
   @media only screen and (max-width: 1130px) and (min-width: 480px) {
   .responsive-image-container{
          display: flex;
          flex-direction: column;
          text-align: center;
        }
   img{width:85%;}
      }
          
  
   *, *:before, *:after {
      padding-left: 0;
      margin: 0;
      box-sizing: border-box;
      
  }    
  
   ol, ul {
      list-style: none;
  }
  
   a {
      text-decoration: none;
      color: black;
  }
      
   .cp_cont {
      height: auto;
  }
      
  /* menu */
   .cp_offcm03 {
      position: relative;
      z-index: 5000;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      overflow: auto;
      width: 100%;
      height: auto;
      padding-top: 0;
      -webkit-transition: transform 0.3s ease-in;
              transition: transform 0.3s ease-in;
      text-align: center;
      color: black;
      background-color: white;
  }
   .cp_offcm03 nav,
   .cp_offcm03 ul {
      height: 100%;
  }
  
   .cp_offcm03 li {
      display: inline-block;
      margin-right: -6px;
  }
  
   .cp_offcm03 a {
      display: block;    
      padding: 15px 45px;
      margin-bottom: -5px;
      -webkit-transition: background-color .3s ease-in;
              transition: background-color .3s ease-in;
  }
      
   .cp_offcm03 a:hover {
      background-color: lightgray;
  }
  
  /* menu toggle */
   #cp_toggle03 {
      display: none;
  }
  
   #cp_toggle03:checked ~ .cp_offcm03 {
      -webkit-transform: translateX(0);
                      transform: translateX(0);
  }
  
   #cp_toggle03:checked ~ .cp_container {
      -webkit-transform: translateX(0);
                      transform: translateX(0);
  }
  
   .cp_mobilebar {
      display: none;
      
  }
  
  /* content */
   .cp_container {
      position: relative;
      top: 0;
      padding: 35px auto;
      -webkit-transition: transform .3s ease-in;
              transition: transform .3s ease-in;
  }   
  
   .cp_content {
      margin: 0 auto;
      padding: 20px;
      height: 65vh;
      text-align: center;
  
  }
  
  @media (max-width: 1130px)and (min-width: 480px) {
  /* menu */
   .cp_offcm03 {
          position: fixed;
          left: -250px;
          overflow-y: hidden;
          width: 250px;
          height: 100%;
          padding-top: 40px;
          color: black;
          background-color: white;
          z-index: 1000;
      }
      
      
   .cp_offcm03 nav {
          background: white;
          border-right: 0.5px solid lightgray;
          margin-left: -210px;
      }
      
      
      
   .cp_offcm03 li {
          display: block;
          margin-right: 0;}
  
          
          
   .cp_offcm03 a {
          padding: 20px;
          
      }
      
  /* menu toggle */
   .cp_mobilebar {
          display: block;
          z-index: 2000;
          position: relative;
          top: 0;
          left: 0;
          padding: 0 25px;
          width: 100%;
          height: 40px;
          background-color: white;
          border-bottom: .05px solid lightgray;
          
          
      }
      
   .cp_menuicon {
          display: block;
          position: relative;
          width: 25px;
          height: 100%;
          cursor: pointer;
          -webkit-transition: transform .3s ease-in;
                  transition: transform .3s ease-in;
      }
   .cp_menuicon &gt; span {
          display: block;
          position: absolute;
          top: 55%;
          margin-top: -0.3em;
          width: 100%;
          height: 0.2em;
          border-radius: 1px;
          background-color: black;
          -webkit-transition: transform .3s ease;
                  transition: transform .3s ease;
      }
   .cp_menuicon &gt; span:before,
   .cp_menuicon &gt; span:after {
          content: &quot;&quot;;
          position: absolute;
          width: 100%;
          height: 100%;
          border-radius: 1px;
          background-color: black;
          -webkit-transition: transform .3s ease-in;
                  transition: transform .3s ease-in;
      }
      
   .cp_menuicon &gt; span:before {
          -webkit-transform: translateY(-0.6em);
                  transform: translateY(-0.6em);
      }
   
   .cp_menuicon &gt; span:after {
          -webkit-transform: translateY(0.6em);
                  transform: translateY(0.6em);
      }
  
   #cp_toggle03:checked + .cp_mobilebar .cp_menuicon { 
          -webkit-transform: rotate(45deg);
                  transform: rotate(45deg);
      }
      
   #cp_toggle03:checked + .cp_mobilebar span:before,
   #cp_toggle03:checked + .cp_mobilebar span:after {
          -webkit-transform: rotate(90deg);
                  transform: rotate(90deg);
      }
      
   #cp_toggle03:checked ~ .cp_offcm03 {
          -webkit-transform: translateX(100%);
                  transform: translateX(100%);
      }
      
   #cp_toggle03:checked ~ .cp_container {
          -webkit-transform: translateX(250px);
                  transform: translateX(250px);
      }
      
   input:checked ~ #h-menu_black {
      display: block;/*カバーを表示*/
      opacity: .6;
  }
      
   #h-menu_black {
      display: none;
      position: fixed;
      z-index: 999;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: black;
      opacity: 0;
      transition: .7s ease-in-out;
  }
      
  /* content */
   .cp_container {
          top: 60px;
          height: 92vh;
          text-align: center; 
      } 
      
   .noscroll{
          overflow: hidden;
          position: fixed;
      }
      
  &lt;/style&gt; 
        
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>