首页 > 代码库 > 模拟锚点

模拟锚点

2024-09-02 03:27:25   218人阅读

当用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">&nbsp;</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">&nbsp;</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">&nbsp;</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="http://www.mamicode.com/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>

 

模拟锚点


联系
我们