js 頁面滾動到指定位置

標籤：fun   int   osi   log   position   rip   default   scrollto   display   

項目中，本來想通過點擊左側列表讓頁面進行快速導航（根據 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謝謝！！

js 頁面滾動到指定位置