JQuery根据字母检索元素并导航到指定位置

介绍：类似于实现ios通讯录中右侧字母，快速导航到联系人的效果，如图：

Html代码如下，分别是字母和港星名字的排序：

        <input type="text" id="searchBox" />
        <ul id="letter">
            <li>C</li>
            <li>L</li>
            <li>D</li>
            <li>E</li>
            <li>F</li>
            <li>G</li>
            <li>H</li>
            <li>X</li>
            <li>Z</li>
        </ul><br />
        <ul id="dataSet">
            <li>刘德华</li>
            <li>黄日华</li>
            <li>张学友</li>
            <li>谢霆锋</li>
            <li>陈奕迅</li>
            <li>陈冠希</li>
            <li>郑伊健</li>
            <li>郭富城</li>
            <li>黄秋生</li>
            <li>杜琪峰</li>
            <li>梁朝伟</li>
        </ul>

    </div>

CSS代码如下：

    <style>
        #dataSet li {
            
            height:100px
        }
        #letter{
            4rem;font-size:1rem; color: #999; position:fixed; top:7.7rem; right:0; z-index:5; background-color:#fff; text-align:center; text-transform:uppercase;
        }
        #letter li{
            height:2rem; line-height:2rem;
        }
    </style>

JS代码：给港星名称默认排序，并给各li，添加pinyin属性，代码如下：

    //初始化排序
    function getPinYin() {
        var set = $("#dataSet li");
        $.each(set, function (index,value) {
            $(this).attr("pinyin", $(this).toPinyin());
        });
        //for (var i = 0; i < set.length; i++) {
        //    set.eq(i).attr("pinyin", set.eq(i).toPinyin())
        //}
        var arr = [];
        for(var i=0;i<set.length;i++)
        {
            arr.push(set[i]);
        }
        arr.sort(function (a, b) {
            var first = $(a).attr("pinyin");
            var second = $(b).attr("pinyin");
            //return $(a).attr("pinyin") - $(b).attr("pinyin");
            if (first < second) return -1;
            if (first > second) return 1;
            return 0;
        });
        for(var i=0;i<arr.length;i++)
        {
            $("#dataSet").append(arr[i]);
        }
    }
</script>

其中$.toPinyin()来自jQuery.Hz2Py-min.js，可以从互联网上下载得到。该方法是获取中文的拼音，效果如图：

JS代码：点击右侧的导航字母，将窗口导航到指定的位置，代码如下：

    function letterClick()
    {
        $("#letter li").click(function () {
            var list = $("#dataSet li");
            var oLetter = $("#letter li");
            var $this = $(this);
            var oI = oLetter.index($this);
            var oText = oLetter.eq(oI).text();
            var first = true; var offset = 0;
            for(var i=0;i<list.length;i++)
            {
                if(list.eq(i).attr("pinyin").charAt(0).toUpperCase()==oText)
                {
                    offset = list.eq(i).offset().top;
                    break;
                }
            }
            $("html,body").animate({ scrollTop: offset }, 0);
        })
    }

注意，将窗口滚动到指定位置用的是animate方法。

当点击G时，窗口顶部导航到郭富城，总体效果如图：

号外：莫不是网站中“回到顶部”的按钮也是相同的实现方式。