浏览器点击返回按钮后HTML/CSS/JS效果异常（移动端菜单栏偏移）求助

问题原因 #

你遇到的异常是Chrome的**往返缓存（bfcache）**机制导致的：页面跳转离开时浏览器会保存当前完整的DOM状态（包括菜单复选框的勾选状态、body的overflow样式），点击返回按钮恢复页面时不会重新执行初始化逻辑，就会出现菜单状态未重置、菜单栏偏移的问题。另外移动端菜单栏使用相对定位，滚动时会跟着页面上移也是X按钮偏移的直接原因。

修复方案 #

你只需要做3处修改即可解决问题：

1. 修复菜单栏滚动偏移 #

修改移动端媒体查询内的.cp_mobilebar样式，将定位改为固定定位，同时给页面添加上内边距避免内容被遮挡：

@media (max-width: 1130px)and (min-width: 480px) {
  .cp_mobilebar {
    display: block;
    z-index: 2000;
    position: fixed; /* 把原有的relative改为fixed */
    top: 0;
    left: 0;
    padding: 0 25px;
    width: 100%;
    height: 40px;
    background-color: white;
    border-bottom: .05px solid lightgray;
  }
  /* 追加body样式避免内容被固定的菜单栏遮挡 */
  body {
    padding-top: 40px;
  }
  /* 其余原有样式保持不变 */
}

2. 强制页面每次显示都重置初始状态 #

在原有script标签内追加pageshow事件监听，不管是首次加载还是从前进后退返回页面，都强制重置菜单状态：

<script type="text/javascript">
// 原有代码保持不变
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 = "hidden";
  } else {
 document.body.style.overflow = "";
  }
}    

// 追加下面的代码
window.addEventListener('pageshow', function() {
  // 重置菜单为关闭状态
  document.getElementById('cp_toggle03').checked = false;
  // 恢复页面滚动权限
  document.body.style.overflow = "";
})
</script>

3. 修复原有HTML语法错误 #

原有<form>标签使用了自闭合写法不符合规范，会导致DOM结构异常，将<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: right; position: inline;"/>末尾的/删掉，然后在</div>（搜索框外层的searchbar闭合标签）前面补</form>即可。

内容的提问来源于stack exchange，提问作者Richard