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

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

<style>
#dataSet li {

height:100px
}
#letter{
width: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>

View Code
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时，窗口顶部导航到郭富城，总体效果如图：



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