页面导航定位

最新推荐文章于 2021-04-15 11:40:14 发布

TheStruggge

最新推荐文章于 2021-04-15 11:40:14 发布

阅读量670

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript jquery html

本文链接：https://blog.youkuaiyun.com/the3z/article/details/46547277

JS 专栏收录该内容

7 篇文章

订阅专栏

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