实现功能：点击右侧字母A，实现锚点跳转功能：
有同学可能说可以直接用锚点跳转实现，是的，锚点跳转可以实现这个功能，但是有一个问题，点击跳转后，再点击返回，返回的是上次跳转的结果，具体的原理就不用多说了，大家可以自己动手试一下，现在开始我们的正式代码部分：
因为是在手机端的项目，在此案例中使用了zepto.js；
css部分：
.address_book { position: relative; width: 100%; margin-top: 0; padding-top: 0; } .address_book li { position: relative; display: -webkit-box; background: #fff; } .address_booK_letter{ padding: 5px 15px; background-color: #f2f2f2; font-size: 18px; font-family: 'Helvetica'; color: #666; } .list_thumb { position: relative; margin: 10px 10px 10px 0; border: 1px solid #aaa; border-radius: 5px; } .list_thumb img{ width: 50px; height: 50px; } .list_info{ -webkit-box-flex: 1; padding-right: 30px; padding-top: 10px; padding-bottom: 10px; } .list_info h4 { margin: 15px 0; color: #666; } .search-letters { position: fixed; top: 20%; right: 5px; font-family: 'Helvetica'; } .search-letters a { display: block; font-size: 12px; margin-top: 4px; color: #333; }
html部分（因为给大家展示的是静态数据，所以html部分比较多）：
1 <body class="address_book_body"> 2 <div class="address_book"> 3 <ul> 4 <h4 class="address_booK_letter"><a href="javascript:;" name='A'>A</a></h4> 5 <li> 6 <div class="list_thumb"> 7 <img src="image/user.png" alt=""> 8 </div> 9 <div class="list_info"> 10 <h4>阿门</h4> 11 </div> 12 </li> 13 <h4 class="address_booK_letter"><a href="javascript:;" name='B'>B</a></h4> 14 <li> 15 <div class="list_thumb"> 16 <img src="image/user.png" alt=""> 17 </div> 18 <div class="list_info"> 19 <h4>贝贝</h4> 20 </div> 21 </li> 22 <h4 class="address_booK_letter"><a href="javascript:;" name='C'>C</a></h4> 23 <li> 24 <div class="list_thumb"> 25 <img src="image/user.png" alt=""> 26 </div> 27 <div class="list_info"> 28 <h4>CC</h4> 29 </div> 30 </li> 31 <h4 class="address_booK_letter"><a href="javascript:;" name='D'>D</a></h4> 32 <li> 33 <div class="list_thumb"> 34 <img src="image/user.png" alt=""> 35 </div> 36 <div class="list_info"> 37 <h4>DD</h4> 38 </div> 39 </li> 40 <h4 class="address_booK_letter"><a href="javascript:;" name='E'>E</a></h4> 41 <li> 42 <div class="list_thumb"> 43 <img src="image/user.png" alt=""> 44 </div> 45 <div class="list_info"> 46 <h4>EE</h4> 47 </div> 48 </li> 49 <h4 class="address_booK_letter"><a href="javascript:;" name='F'>f</a></h4> 50 <li> 51 <div class="list_thumb"> 52 <img src="image/user.png" alt=""> 53 </div> 54 <div class="list_info"> 55 <h4>FF</h4> 56 </div> 57 </li> 58 <h4 class="address_booK_letter"><a href="javascript:;" name='G'>G</a></h4> 59 <li> 60 <div class="list_thumb"> 61 <img src="image/user.png" alt=""> 62 </div> 63 <div class="list_info"> 64 <h4>哥哥</h4> 65 </div> 66 </li> 67 <h4 class="address_booK_letter"><a href="javascript:;" name='H'>H</a></h4> 68 <li> 69 <div class="list_thumb"> 70 <img src="image/user.png" alt=""> 71 </div> 72 <div class="list_info"> 73 <h4>HH</h4> 74 </div> 75 </li> 76 <h4 class="address_booK_letter"><a href="javascript:;" name='I'>I</a></h4> 77 <li> 78 <div class="list_thumb"> 79 <img src="image/user.png" alt=""> 80 </div> 81 <div class="list_info"> 82 <h4>II</h4> 83 </div> 84 </li> 85 <h4 class="address_booK_letter"><a href="javascript:;" name='W'>W</a></h4> 86 <li> 87 <div class="list_thumb"> 88 <img src="image/user.png" alt=""> 89 </div> 90 <div class="list_info"> 91 <h4>WW</h4> 92 </div> 93 </li> 94 <h4 class="address_booK_letter"><a href="javascript:;" name='Z'>Z</a></h4> 95 <li> 96 <div class="list_thumb"> 97 <img src="image/user.png" alt=""> 98 </div> 99 <div class="list_info"> 100 <h4>ZZ</h4> 101 </div> 102 </li> 103 <h4 class="address_booK_letter"><a href="javascript:;" name='#'>#</a></h4> 104 <li> 105 <div class="list_thumb"> 106 <img src="image/user.png" alt=""> 107 </div> 108 <div class="list_info"> 109 <h4>##</h4> 110 </div> 111 </li> 112 113 </ul> 114 <!-- 右侧字母表 --> 115 <div class="search-letters"> 116 <a name='A'>A</a> 117 <a name='B'>B</a> 118 <a name='C'>C</a> 119 <a name='D'>D</a> 120 <a name='E'>E</a> 121 <a name='F'>F</a> 122 <a name='G'>G</a> 123 <a name='H'>H</a> 124 <a name='I'>I</a> 125 <a name='W'>W</a> 126 <a name='Z'>Z</a> 127 <a name='#'>#</a> 128 </div> 129 </div> 130 </body>
js部分：
js引用了zepto：
1 <script src="zepto.min.js"></script> 2 <script> 3 (function(){ 4 //zepto没有scrollTo动画，所以在这里扩展了一个scrollTo函数； 5 $.fn.scrollTo = function(options) { 6 var defaults = { 7 toT: 90, //滚动目标位置 8 durTime: 500, //过渡动画时间 9 delay: 30, //定时器时间 10 callback: null //回调函数 11 }; 12 var opts = $.extend({},defaults, options), 13 timer = null, 14 _this = this, 15 curTop = _this.scrollTop(), //滚动条当前的位置 16 subTop = opts.toT - curTop, //滚动条目标位置和当前位置的差值 17 index = 0, 18 dur = Math.round(opts.durTime / opts.delay), 19 smoothScroll = function(t) { 20 index++; 21 var per = Math.round(subTop / dur); 22 if (index >= dur) { 23 _this.scrollTop(t); 24 window.clearInterval(timer); 25 if (opts.callback && typeof opts.callback == 'function') { 26 opts.callback(); 27 } 28 return; 29 } else { 30 _this.scrollTop(curTop + index * per); 31 } 32 }; 33 timer = window.setInterval(function() { 34 smoothScroll(opts.toT); 35 }, opts.delay); 36 37 return _this; 38 }; 39 40 $('.search-letters a').each(function(index, item) { 41 42 $(this).click(function() { 43 var att = $(this).attr('name'); 44 var curOffsetTop = $(".address_booK_letter a[name=" + att + "]")[0].offsetTop; 45 $(".address_book_body").scrollTo({ 46 toT: curOffsetTop, 47 durTime: 0 48 }); 49 }); 50 }); 51 })(); 52 53 54 </script>
没有对样式进行过多调节，需要的小伙伴可以根据实际需要进行设置，效果图如下：
ps：可能还有比这个更简单的办法，大家可以互相分享一下，如果有什么问题，欢迎随时骚扰。。。。