页面导航定位

来源：互联网发布：滇虹药业淘宝旗舰店编辑：程序博客网时间：2024/04/26 01:59

用HTML的锚点来定位有一定的局限性，可能不是精确地定位到一个高度，而且似乎对于动态的节点的支持也不够。那么用JS去动态滚动页面就很好地解决这些问题，能精确地定位到一个高度，而且用的是事件，可以保证点击的有效性。

代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">.aaaa{    width: 100%;    height:658px;    margin-bottom:30px;    border: 2px dashed #dc56c3;    background-color: #000;}#jshovernav{    position:fixed;    top:50px;    right:10px;}    </style>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>    <script type="text/javascript">    $(function(){$("#jshovernav a").click(function(){        var idName = $(this).attr("id-name");        var scroll = $("#"+idName).offset().top-30;        console.log(scroll);        $(document).scrollTop(scroll);    });    });    </script></head><body>    <div id="hb_trend" class="aaaa">时装</div>    <div id="hb_brand" class="aaaa">品牌</div>    <div id="hb_jewelry" class="aaaa">珠宝腕表 配饰</div>    <div id="hb_beauty" class="aaaa">美容</div>    <div id="hb_star" class="aaaa">明星</div>    <div id="hb_life" class="aaaa">生活</div>    <div id="hb_gallery" class="aaaa">图片库</div>    <ul id="jshovernav" class="fixednavlist">         <li><a href="javascript:;" id-name="hb_trend">Trends</a><span>时装</span></li>        <li><a href="javascript:;" id-name="hb_brand">Brands </a><span>品牌</span></li>        <li><a href="javascript:;" id-name="hb_jewelry">Accessory</a><span>珠宝腕表 配饰</span></li>        <li><a href="javascript:;" id-name="hb_beauty">Beauty</a><span>美容</span></li>        <li><a href="javascript:;" id-name="hb_star">Stars</a><span>明星</span></li>        <li><a href="javascript:;" id-name="hb_life">LifeStyle</a><span>生活</span></li>        <li><a href="javascript:;" id-name="hb_gallery">Galary</a><span>图片库</span></li>    </ul></body></html>

0 0