js 页面滚动到指定位置

Posted 2020-10-04 理想程序员

项目中，本来想通过点击左侧列表让页面进行快速导航（根据 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谢谢！！