native 嵌套 h5 的时候，总是有很多很多的问题，例如：锚点（锚链接）
项目有个需求，在native嵌套 h5 的页面，要实现锚链接，想法挺好。代码如下：
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<title>实现网页定位导航系统</title>
<style>
body{margin:0;padding:0}
#num1,#num2,#num3{margin-top:1000px}
</style>
</head>
<body>
<a href="#num1">锚链接1</a>
<a href="#num2">锚链接2</a>
<a href="#num3">锚链接3</a>
<p id="num1" name ="num1">AAAAAAAAAAAAAAAA</p>
<p id="num2" name ="num2">BBBBBBBBBBBBBBBB</p>
<p id="num3" name ="num3">CCCCCCCCCCCCCCCC</p>
</body>
</html>哈哈，锚链接终于实现了，可以上测试服务器了。
等到项目上到测试服务器之后，蛋疼问题出现了。native 嵌套h5 ，页面没问题，锚链接没问题，问题在哪里，问题在于：native嵌套h5 之后，如果要返回到上一个页面，那么，问题来了。native想要返回到上一个native页面，可以监听到h5的链接，加入锚链接之后，h5的链接早已改变，如下图：
所以native返回的，都是锚链接的路劲，并不是真正的native页面，
如何解决。解决方案如下：
1. 使用 window.scrollTo(0,1);
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
</head>
<style>
p{height: 500px;}
span{margin-left: 10%;}
</style>
<body>
<span class="number1">点我1</span>
<span class="number1">点我2</span>
<span class="number1">点我3</span>
<p>AAAAAAA</p>
<p>BBBBBBB</p>
<p style="height: 1000px;">CCCCCCC</p>
</body>
<script src="build/jquery.min.js"></script>
<script>
$(".number1").click(function(){
var num = $(this).index();
if(num == "0"){
window.scrollTo(0,40);
}else if(num == "1"){
window.scrollTo(0,550);
}else if(num == "2"){
window.scrollTo(0,1050);
}
})
</script>
</html>PS ：这样做，很累，所以不推荐使用。
2. 使用插件 scrollto.js
代码附上：
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<title>平滑滚动到页面指定位置</title>
<style type="text/css">
.nav{width:100%;margin:10px auto;}
.box{height:500px}
#main{width:100%; min-height:600px; margin:30px auto 0 auto; background:#fff; -moz-border-radius:12px;-khtml-border-radius: 12px;-webkit-border-radius: 12px; border-radius:12px;}
h2.top_title{margin:4px 20px; padding-top:15px; padding-left:20px; padding-bottom:10px; border-bottom:1px solid #d3d3d3; font-size:18px; color:#a84c10;}
</style>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<script type="text/javascript" src="http://jt.875.cn/js/scrollto.js"></script>
<script type="text/javascript">
$(function() {
$(".nav_pro").click(function() {
$.scrollTo('#pro', 500);
});
$(".nav_news").click(function() {
$.scrollTo('#news', 800);
});
$(".nav_ser").click(function() {
$.scrollTo('#ser', 1000);
});
$(".nav_con").click(function() {
$.scrollTo('#con', 1200);
});
$(".nav_job").click(function() {
$.scrollTo('#job', 1500);
});
});
</script>
</head>
<body>
<div id="main">
<ul class="nav">
<li><span class="nav_pro">产品展示</a></li><br/>
<li><span class="nav_news">新闻中心</a></li><br/>
<li><span class="nav_ser">服务支持</a></li><br/>
<li><span class="nav_con">联系我们</a></li><br/>
<li><span class="nav_job">人才招聘</a></li><br/>
</ul>
<div class="clear"></div>
<div id="pro" class="box">
<h3>产品展示</h3>
</div>
<div id="news" class="box">
<h3>新闻中心</h3>
</div>
<div id="ser" class="box">
<h3>服务支持</h3>
</div>
<div id="con" class="box">
<h3>联系我们</h3>
</div>
<div id="job" class="box" style="height:680px">
<h3>人才招聘</h3>
</div>
</div>
</body>
</html>
