js页⾯滚动到指定位置
项⽬中，本来想通过点击左侧列表让页⾯进⾏快速导航（根据 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 {
javascript void 0 是什么意思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谢谢！！