html列表滑动字母索引,移动端列表索引效果

移动端列表索引效果非常实用，比如：手机通讯录。你可以根据字母来查找对应的内容。下面这个例子我是参考了 MUI 里的列表索引效果，写出来的代码，代码的结构基本一样，但功能会少一些，去掉了搜索框搜索，只有单纯的字母索引，不过这也基本够用了。这个效果是基于 jQuery 库的，所以在用的时候就记得引入 jQuery 库。

移动端列表索引效果非常实用，比如：手机通讯录。你可以根据字母来查找对应的内容。下面这个例子我是参考了 MUI 里的列表索引效果，写出来的代码，代码的结构基本一样，但功能会少一些，去掉了搜索框搜索，只有单纯的字母索引，不过这也基本够用了。这个效果是基于 jQuery 库的，所以在用的时候就记得引入 jQuery 库。

效果图

为了版面美观我专门用横屏截了个图，正如你所看到的，样板还是挺好看的，那功能怎么样呢？效果演示地址：http://yunkus.com/demo/indexlist/index.html ，注意 PC 端要切换到手机模式下浏览，如果是手机浏览就直接出效果了。

思路：

1.布局好页面(包括列表内容，A~Z字母索引导航)，右侧导航盒子(index-bar)的高度及每个字母父盒子(a 标签)的高度都通过 JavaScript 来动态控制，因为不同手机屏幕高度不一样，