zepto的scrollTo，实现锚点跳转

实现功能：点击右侧字母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：可能还有比这个更简单的办法，大家可以互相分享一下，如果有什么问题，欢迎随时骚扰。。。。