實現功能:點擊右側字母A,實現錨點跳轉功能:javascript
有同窗可能說能夠直接用錨點跳轉實現,是的,錨點跳轉能夠實現這個功能,可是有一個問題,點擊跳轉後,再點擊返回,返回的是上次跳轉的結果,具體的原理就不用多說了,你們能夠本身動手試一下,如今開始咱們的正式代碼部分:css
由於是在手機端的項目,在此案例中使用了zepto.js;html
css部分:java
.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部分比較多):web
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:flex
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:可能還有比這個更簡單的辦法,你們能夠互相分享一下,若是有什麼問題,歡迎隨時騷擾。。。。this