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{
             width:4rem;font-size:1rem; color: #; position:fixed; top:.7rem; right:; z-index:; 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=;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 -;
             if (first > second) return ;
             return ;
         });
         for(var i=;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 = ;
             for(var i=;i<list.length;i++)
             {
                 if(list.eq(i).attr("pinyin").charAt().toUpperCase()==oText)
                 {
                     offset = list.eq(i).offset().top;
                     break;
                 }
             }
             $("html,body").animate({ scrollTop: offset }, );
         })
     }

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

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

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