移动端的点击滚动逻辑实现。

　　今天在忙网站的时候有个朋友探讨一个问题，在移动端实现点击滚动，没怎么想就回答说是和PC端一样，像下面

$('html', "body").ainmate({
   scrollTop: xxx 
}, 1000);

　　后来朋友回复说问题，没解决我就想到了之前用移动端中制作局部滚动的方法：

.body{
    padding-top: 48px;
    position: absolute;
     100%;
    bottom: 0;
    top: 0;
    -webkit-overflow-scrolling: touch;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    overflow: auto;
}

　　这样的话html，body的高度只是100%，设置滚动当然不会有效果，那内部滚动是移动的谁呢，后来思考和实验之下发现移动的是.body；这样找到了移动的主体，问题是不是就解决了呢

 $('.body').animate({
   scrollTop: $('.body li[data-leter=' ++']').offset().top
 },1000);

　　结果发现问题并没有解决，反而会乱移动，找了半天才发现了可能的原因，offset()的定位原点是在窗口的顶边，而不是.body的顶边，所以当.body移动以后，我们想选择的DOM距离顶边的距离发生了变化，因此会出现乱滚动的现象，当找到这个问题以后就好解决了，当页面刚加载的时候.body距离顶边的距离是一定的，此时记录下我们想移动的DOM的距离顶部的距离，以后直接取这个定值就可以了，因此

$('.selector').each(function (i, item) {
    $(item).data('rees', $(item).offset().top - $('.body').offset().top);
});

　　此时记录下来之后，当需要这个值的时候，只需要去取这个值，赋值给.body的scrollTop值即可解决这个问题。