这是一款简单实用的jQuery商城网站常用楼层滚动跳转定位代码,仿京东天猫商城点击楼层菜单跳转定位到指定位置的效果,右下角还带有返回顶部按钮。
使用方法
在页面引入以下floor.js和jquery.min.js两个文件
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/floor.js"></script>
<script type="text/javascript"> /* totop //返回顶部按钮 fixedevery // 左侧固定导航的每一项 louceng //模块的每一项 header //头部 */ $(function(){ var obj = new floor('.totop','.fixedmeau>li','.louceng_box>.louceng','.header_box'); obj.init() }) </script>
Html结构
在页面引入以下html代码
<!--右侧固定导航--> <ul class="fixedmeau"> <li class="active"><i>1F</i><span>服饰</span></li> <li><i>2F</i><span>美妆</span></li> <li><i>3F</i><span>手机</span></li> <li><i>4F</i><span>家电</span></li> <li><i>5F</i><span>数码</span></li> <li><i>6F</i><span>运动</span></li> <li><i>7F</i><span>居家</span></li> <li><i>8F</i><span>母婴</span></li> <li><i>9F</i><span>食品</span></li> <li><i>10F</i><span>图书</span></li> <li><i>11F</i><span>服务</span></li> </ul> <!--返回顶部--> <div class="totop"><span>▲</span>Top</div> <!--头部--> <div class="header_box"> <div class="header">头部</div> <div class="meau">菜单</div> </div> <!--模块--> <div class="louceng_box"> <div class="louceng"> <div class="title">1.服饰 <span>FUSHI</span></div> <div class="con">服饰</div> </div> <div class="louceng"> <div class="title">2.美妆 <span>MEIZHUANG</span></div> <div class="con">美妆</div> </div> <div class="louceng"> <div class="title">3.手机 <span>SHOUJI</span></div> <div class="con">手机</div> </div> <div class="louceng"> <div class="title">4.家电 <span>JIADIAN</span></div> <div class="con">家电</div> </div> <div class="louceng"> <div class="title">5.数码 <span>SHUMA</span></div> <div class="con">数码</div> </div> <div class="louceng"> <div class="title">6.运动 <span>YUNDONG</span></div> <div class="con">运动</div> </div> <div class="louceng"> <div class="title">7.居家 <span>JUJIA</span></div> <div class="con">居家</div> </div> <div class="louceng"> <div class="title">8.母婴 <span>MUYIN</span></div> <div class="con">母婴</div> </div> <div class="louceng"> <div class="title">9.食品 <span>SHIPIN</span></div> <div class="con">食品</div> </div> <div class="louceng"> <div class="title">10.图书 <span>TUSHU</span></div> <div class="con">图书</div> </div> <div class="louceng"> <div class="title">11.服务 <span>FUWU</span></div> <div class="con">服务</div> </div> </div>