项目中,本来想通过点击左侧列表让页面进行快速导航(根据 id="item" 和 a标签的 href 属性【<a href="#item"></a>】),不过滚动后的页面一直是顶在浏览器页面顶部的,不符合项目需求,所以就通过 js 代码让页面进行指定位置滚动,代码如下:
$(".left_nav>ul>li").click(function () { var n = parseInt($(this)[0].id); switch (n){ case 0: x = 252; break; case 1: x = 816; break; case 2: x = 1257; break; case 3: x = 1662; break; case 4: x = 2237; break; case 5: x = 2660; break; default: x = 252; } $("body,html").scrollTop(x); }); // 左侧快速导航滚动
左侧快速导航页面结构如下:
<div class="left_nav"> <ul> <li id="0"><a href="javascript:void(0)">猜你<br>喜欢</a></li> <li id="1"><a href="javascript:void(0)">专用<br>教材</a></li> <li id="2"><a href="javascript:void(0)">教材<br>特色</a></li> <li id="3"><a href="javascript:void(0)">系列<br>教材</a></li> <li id="4"><a href="javascript:void(0)">大班</a></li> <li id="5"><a href="javascript:void(0)">小班</a></li> </ul> </div>
代码结构样式如下:
.left_nav { position: fixed; left: calc((100% - 1240px) / 2 - 90px); bottom: 60px; } .left_nav>ul { padding: 0; margin: 0; list-style: none; border: 1px solid #5d5656; border-top: none; box-sizing: border-box; } .left_nav>ul>li { width: 51px; height: 51px; text-align: center; background: #808080; border-top: 1px solid #5d5656; } .left_nav>ul>li:hover { background: #F95E01; } .left_nav>ul>li>a { display: inline-block; font-size: 14px; color: #f5f5f5; margin-top: 6px; text-decoration: none; } .left_nav>ul>li:first-child+li+li+li+li>a { margin-top: 14px; } .left_nav>ul>li:first-child+li+li+li+li+li>a { margin-top: 14px; }
O(∩_∩)O谢谢!!