当用a锚点时，安卓出现物理返回键无效。处理方法：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
<meta content="no-cache" http-equiv="pragma">
<meta content="0" http-equiv="expires">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta content="telephone=no, address=no" name="format-detection">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="x5-fullscreen" content="true">
<meta name="full-screen" content="yes">
<title>模拟锚点demo</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
a {
text-decoration: none;
}
.slide {
height: 500px;
}
.anchor-nav {
display: flex;
height: 30px;
line-height: 30px;
position: relative;
border-bottom: 1px solid #ccc;
}
.anchor-nav .anchor-nav-cell {
flex: 1;
text-align: center;
}
.anchor-nav .anchor-nav-cell a {
color: #333;
}
.anchor-table {
margin: 0 4%;
width: 92%;
}
.anchor-table .anchor-table-cell {
position: relative;
}
.anchor-table .anchor-table-cell .target {
position: absolute;
left: 0;
top: -30px;
}
.anchor-nav-wrapper {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
background: #fff;
}
</style>
</head>
<body>
<div class="slide js-slide">
</div>
<div class="anchor-nav js-anchor-nav">
<div class="anchor-nav-cell active">
<a href="javascript:;" onclick="_scrollTo(‘1F‘)">商标</a>
</div>
<div class="anchor-nav-cell">
<a href="javascript:;" onclick="_scrollTo(‘2F‘)">域名</a>
</div>
<div class="anchor-nav-cell">
<a href="javascript:;" onclick="_scrollTo(‘3F‘)">认证</a>
</div>
</div>
<ul class="anchor-table">
<li class="anchor-table-cell">
<a class="target" name="1F" id="1F"> </a>
<div class="anchor-detail">
<h1>商标</h1>
<p>龙华</p>
<p>龙华</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</li>
<li class="anchor-table-cell">
<a class="target" name="2F" id="2F"> </a>
<div class="anchor-detail">
<h1>域名</h1>
<p>龙华</p>
<p>龙华</p>
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</li>
<li class="anchor-table-cell">
<a class="target" name="3F" id="3F"> </a>
<div class="anchor-detail">
<h1>认证</h1>
<p>龙华</p>
<p>龙华</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</li>
</ul>
<div class="anchor-nav-wrapper js-anchor-nav-wrapper">
<div class="anchor-nav">
<div class="anchor-nav-cell active">
<a href="javascript:;" onclick="_scrollTo(‘1F‘)">商标</a>
</div>
<div class="anchor-nav-cell">
<a href="javascript:;" onclick="_scrollTo(‘2F‘)">域名</a>
</div>
<div class="anchor-nav-cell">
<a href="javascript:;" onclick="_scrollTo(‘3F‘)">认证</a>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.3.min.js" ></script>
<script type="text/javascript">
var js_nav_wrapper=document.getElementsByClassName("js-anchor-nav-wrapper");
var h_header = document.getElementsByClassName(‘js-anchor-nav‘)[0].clientHeight;
window.onscroll=function(){
var h = document.getElementsByClassName(‘js-slide‘)[0].offsetHeight;
var h_topred = h ;
var check=document.documentElement.scrollTop==0?document.body:document.documentElement;
var obj=check.scrollTop;
if (obj>h_topred) {
js_nav_wrapper[0].style.display="block";
}
if (obj<=h_topred) {
js_nav_wrapper[0].style.display="none";
};
}
// 模拟锚点
function getElementTop(element) {
var actualTop = element.offsetTop;
var current = element.offsetParent;
while(current !== null) {
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
function _scrollTo(id) {
var _id = document.getElementById(id);
var top = getElementTop(_id);
window.scrollTo(0, top);
}
</script>
</body>
</html>
时间： 2024-10-25 03:42:54