jQuery页面滚动显示浮动菜单栏锚点定位效果代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

26 100 34



特效描述:页面滚动 显示浮动 菜单栏 锚点定位。jQuery页面下拉滚动,显示浮动菜单栏,点击A标签锚点定位移动到相应的页面位置效果。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>

2. HTML代码

    <div id="loutinav">
        <ul>
            <li class="active"><span>享品质</span> </li>
            <li><span>服饰美妆</span> </li>
            <li><span>电脑数码</span> </li>
            <li><span>3C运动</span> </li>
            <li><span>爱吃</span> </li>
            <li><span>母婴居家</span> </li>
            <li><span>图书汽车</span> </li>
            <li><span>虚拟</span> </li>
            <li><span>还没逛够</span> </li>
            <li class="last">顶部</li>
        </ul>
    </div>
    <!--楼层内容开始-->
    <div id="header">
    	向下滚动鼠标查看效果
    </div>
    <div id="main">
        <div class="louti" style="background: #cc0033;">
            享品质
        </div>
        <div class="louti" style="background: #999933;">
            服饰美妆
        </div>
        <div class="louti" style="background: #ccff33;">
            电脑数码
        </div>
        <div class="louti" style="background: #006633;">
            3C运动
        </div>
        <div class="louti" style="background: #6666cc;">
            爱吃
        </div>
        <div class="louti" style="background: #ff6600;">
            母婴居家
        </div>
        <div class="louti" style="background: #ffff00;">
            图书汽车
        </div>
        <div class="louti" style="background: #3333ff;">
            虚拟
        </div>
        <div class="louti" style="background: #ff00cc;">
            还没逛够
        </div>
    </div>
    <div id="footer">
    	网站底部
    </div>
    <!--楼层内容结束-->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到