前端入坑紀 10

又是一個陽光明媚的周六，連續兩三天的陰雨天氣后，難得的放晴，連帶心情都好了很多啊！
這回嘗試做了個聯系人的單頁內跳轉，希望對大家有啟發！

OK，first things first！項目鏈接

效果截圖

HTML 結構

<p id="tip">您還未添加<strong></strong>姓的聯系人</p>
<ul id="libtns">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
    <li>N</li>
    <li>O</li>
    <li>P</li>
    <li>Q</li>
    <li>R</li>
    <li>S</li>
    <li>T</li>
    <li>U</li>
    <li>V</li>
    <li>W</li>
    <li>X</li>
    <li>Y</li>
    <li>Z</li>
</ul>
<div class="wrp">
    <ol>
        <li>
            <p id="U">U</p>
            <ul>
                <li>Ulruysa</li>
                <li>Ulruysa</li>
                <li>Ulruysa</li>
                <li>Ulruysa</li>
                <li>Ulruysa</li>
                <li>Ulruysa</li>
            </ul>
        </li>
        <li>
            <p id="V">V</p>
            <ul>
                <li>vicdy</li>
                <li>vicdy</li>
                <li>vicdy</li>
                <li>vicdy</li>
                <li>vicdy</li>
                <li>vicdy</li>
            </ul>
        </li>
        <li>
            <p id="W">W</p>
            <ul>
                <li>王曦1</li>
                <li>王曦</li>
                <li>王曦</li>
                <li>王曦</li>
                <li>王曦</li>
                <li>王曦</li>
            </ul>
        </li>
        <li>
            <p id="X">X</p>
            <ul>
                <li>許毅1</li>
                <li>許毅2</li>
                <li>許毅4</li>
                <li>許毅5</li>
                <li>許毅6</li>
                <li>許毅7</li>
            </ul>
        </li>
        <li>
            <p id="Y">Y</p>
            <ul>
                <li>楊毅1</li>
                <li>楊毅2</li>
                <li>楊毅4</li>
                <li>楊毅5</li>
                <li>楊毅6</li>
                <li>楊毅7</li>
            </ul>
        </li>
        <li>
            <p id="Z">Z</p>
            <ul>
                <li>張成1</li>
                <li>張成2</li>
                <li>張成3</li>
                <li>張成4</li>
                <li>張成5</li>
                <li>張成6</li>
            </ul>
        </li>

    </ol>
</div>

開頭的p是用來提示的，后面跟著的ul是用來點擊的字母， ol里的每個li代表一個字母分類的姓名。

CSS 結構

        html,
        body,
        ul,
        li {
            margin: 0;
            padding: 0
        }
        
         ::-webkit-scrollbar {
            display: none
        }
        
        ul,
        li {
            list-style: none
        }
        
        .wrp {
            background-color: #fefefe;
            box-sizing: border-box;
            border: 1px solid transparent;
        }
        
        #libtns {
            position: fixed;
            z-index: 99;
            top: 0;
            bottom: 0;
            right: 0;
            color: #fff;
            width: 25px;
            text-align: center;
            background-color: rgba(0, 0, 0, .6);
            display: flex;
            display: -webkit-flex;
            flex-flow: column wrap;
        }
        
        #tip {
            opacity: 0;
            transform: translateY(50px);
            position: fixed;
            background-color: rgba(0, 0, 0, .6);
            border-radius: 3px;
            padding: 6px;
            width: 60%;
            box-sizing: border-box;
            color: #fefefe;
            bottom: 0;
            left: 20%;
            text-align: center;
            transition: all .3s ease-out;
        }
        
        #tip strong {
            margin: 0 3px;
        }
        
        #tip.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        #libtns li {
            text-transform: capitalize;
            font-size: 13px;
            flex: 1;
            width: 25px;
        }
        
        .wrp li p {
            transition: all .3s ease-out;
        }
        
        .active {
            background-color: #ccc;
        }

點擊用的字母是通過flex布局的，這樣更好的適配屏幕高度。

關鍵的 JavaScript

        var libtns = document.getElementById("libtns"),
            otip = document.getElementById("tip"),
            timer = "",
            oatg = otip.getElementsByTagName("strong")[0],
            pragfs = document.getElementsByTagName("p");
        // 獲取各個id對應的offsetTop高度，存入自定義的scorlHeit中
        for (var i = 0; i < pragfs.length; i++) {
            var sclHetVal = pragfs[i].offsetTop;
            pragfs[i].setAttribute("scorlHeit", sclHetVal);
        }
        libtns.addEventListener("touchstart", function(evt) {
            // 獲取點擊的字母對應id的p標簽
            var oletr = document.getElementById(evt.target.innerText);
            // 每次點擊后都要把前一次的計數器清除
            clearTimeout(timer);
            if (oletr) {
                // 變換字母背景的效果
                oletr.className = "active";
                setTimeout(function() {
                    oletr.className = "";
                }, 300);
                // 獲取對應字母的高度并滾動至該高度
                var leterHeit = oletr.getAttribute("scorlHeit");
                window.scrollTo(0, leterHeit);
                // 提示效果的取消
                otip.className = "";
            } else {
                // 提示效果
                oatg.innerText = evt.target.innerText;
                otip.className = "active";
                // 1200ms后將提示效果的取消
                timer = setTimeout(function() {
                    otip.className = "";
                }, 1200);

            }

        }, false);

整個效果的關鍵是獲取對應字母屏幕內位置，然后滾動到該位置。已編寫了關鍵的注解，有興趣的小伙伴，慢慢研究吧！