当按下浏览器上的后退按钮后返回到页面时,HTML CSS和JAVASCRIPT不工作

2022-01-28 13:39:50 标签 htmlcssbuttonbrowserback

HTML、CSS和JAVASCRIPT都像我希望的那样工作。这是直到我返回到相同的页面后,按回车箭头在我的浏览器(我目前使用谷歌chrome)。例如:当我打开智能手机浏览器上的菜单栏时,它会按照我的意愿保持在屏幕上的一个位置。但是,如果我在菜单栏打开的情况下回到页面,如果我向下滚动,屏幕顶部(X按钮所在的位置)会向上移动。

你能帮我修复它,使我使用的代码保持完全相同,即使在我使用浏览器上的后退和前进按钮后回到相同的页面?

<!DOCTYPE html>
<html lang="en; jp;">     
    
<body style="background-color: white; font-family: sans-serif;">
      
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    
<title>Koizumi?Home Page</title>
      
<div class="page-wrap">
     
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
        
<header class="cp_offcm03">
        
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
            
<li style="border-bottom: .05px solid lightgray;"><a href="Website_Home_Page_English.html">Home</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="Website_Blog_English.html">Blog</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="Website_Koizumi_English.html">About Koizumi</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="Bibliography_English.html">Bibliography</a></li>
    
<div class="searchbar"> 
            
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: right; position: inline;"/>
<input class="search2" id="txtSearch" type="text" name="serach_bar" size="31" maxlength="255" value="" style="center: 396px; top: 185px; width: 180px; height: 26px;"/>
<input class="search1" type="submit" name="submition" value="Search" style=" padding-  
bottom:20px; left: 0px; top: 153px; height: 25px; width: 46px;"/>
<input class="search2" type="hidden" name="sitesearch" value="default.html"/>    
    
</div>
    
<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 = "";
  }
}    
    
</script>
    </ul>
    </nav>
    </header>
    </div>
    </div>
        
<br><br><div class="image" style="margin: 10px;">
    
<a href="Website_JapanTravel_English.html"><img src="photos/Home_Page/Travel/Homepage_Travel_English.jpg" alt="Travel" width="85%"></a>
    
<div class=" responsive-image-container"><a href="photos/Blog/Japanese_Culture/Blog/yokai/yokai_English.html"><img src="photos/Home_Page/Yokai/Homepage_yokai_English.jpg" alt="Yokai" width="42.4%"></a> <a href="photos/Links/Kansai/Kansai_html_photos/Kyoto_html_photo/Kyoto/Blog/Kongoji/Kongoji_html_photo/Kongoji_English.html"><img src="photos/Home_Page/Kongoji/Kongoji_homepage_English.jpg" alt="Kongoji" width="42.4%"></a>
</div>
    
<div class=" responsive-image-container"><a href="photos/Links/Kanto/Kanto_html_photos/Saitama_html_photos/Saitama/Blog/Tamagawa_Onsen/Tamagawa_Onsen_html_photo/Tamagawa_Onsen_English.html"><img src="photos/Home_Page/Tamagawa_Onsen/Homepage_Tamagawa_Onsen_English.jpg" alt="Tamagawa_Onsen" width="42.4%"></a> <a href="Website_Koizumi_English.html"><img src="photos/Home_Page/About_Koizumi/Homepage_Koizumi_English.jpg" alt="Koizumi" width="42.4%"></a>
</div>
    
<br><br><footer class="site-footer" style="font-size: 12px;">小泉? | <a href="Website_Home_Page.html">日本語</a></footer></div>
      
<style>
    
 .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: "";
  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 > 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 > span:before,
 .cp_menuicon > span:after {
        content: "";
        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 > span:before {
        -webkit-transform: translateY(-0.6em);
                transform: translateY(-0.6em);
    }
 
 .cp_menuicon > 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;
    }
    
</style> 
      
</body>
</html>
阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码