浅谈锚链接（native 嵌套 h5）

White feathe

发布于 2021-12-08 15:11:39

7010

发布于 2021-12-08 15:11:39

native 嵌套 h5 的时候，总是有很多很多的问题，例如：锚点（锚链接）

项目有个需求，在native嵌套 h5 的页面，要实现锚链接，想法挺好。代码如下：

<!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);

<!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

代码附上：

<!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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016/05/05 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html5