viewBox A-Z滚动样式

效果图：

     

代码实现 （其中使用了ionic框架。。。）

html 代码：

<ion-content class='page-location'>

        <div class='AZLists A'>

        <div class='AZLists-title'>A</div>

                ..............

         </div>

         <div class='AZLists B'>

        <div class='AZLists-title'>B</div>

                ..............

         </div>

         .......

</ion-content>

此部分代码可以用ng-repeat写

<div class='a-lists'>

    <div ng-repeat='n in navItem' >

        <p class='{{n}}-nav-item'>{{n}}</p>

    </div>

</div>

<div class='pop-AZ'></div>

css 代码

.a-lists{

        position: fixed;

         width:25px;

        margin: auto;

        background-color:transparent;

         padding-top:5px;

        padding-bottom:5px;

        right:;top:100px;

        z-index:;

}

.a-lists p{

    margin:;padding:;

    font-size:8px;

    text-align: center;

    color:#;

    line-height: 14px;

}

.AZLists-title{

    width:%;

    height:20px;

    background-color: #ddd;

    color:#;

    line-height: 20px

}

.pop-AZ{

        width:60px;

        height:60px;

        border-radius: 4px;

        background-color: rgba(,,,.);

        color:#FFF;

        font-size:24px;
　　　　　z-index:;
　　　 　line-height:60px;

        text-align: center;
　　 　　position: fixed;
　　　　 margin-left:-30px;
　　　　 left:%;
　　　　 top:{{popAZTop}};
　　　　 display: none;

}                             

js 代码

    $scope.popAZTop=(window.innerHeight/2-30)+'px';

    var _items=[];

    for(var k=0;k<26;k++){

      _items[k]=String.fromCharCode(65+k);

    }

    $scope.navItem=_items;

    setTimeout(function(){

      for(var i=0;i<_items.length;i++){

          var _azitem=document.querySelector('.'+_items[i]+'-nav-item');

          _azitem.addEventListener('touchstart',function(e){

              $('.a-lists').css('background-color','#ddd');

             var _tip=$(this).text();

             if($('.'+_tip).offset()!==undefined){

                var _scrolltop =$('.'+_tip).offset().top-$('.A').offset().top;

               $('ion-content').animate({

                   scrollTop: _scrolltop},1

               );

             }

             $('.pop-AZ').css('display','block');

            $('.pop-AZ').empty().html(_tip);

          })

          _azitem.addEventListener('touchmove',function(e){

             e.preventDefault();

             var touch=e.targetTouches[0];

             var _item=parseInt((touch.pageY-100)/14)

             if(_item>=_items.length){

                 _item=(_items.length-1);

             }else if(_item<0){

                _item=0;

             }

             var event = document.createEvent('Events');

             event.initEvent('touchstart', true, true);

             document.querySelector('.'+_items[_item]+'-nav-item').dispatchEvent(event);

             $('.pop-AZ').css('display','block');

             $('.pop-AZ').empty().append(_items[_item]);

          })

          _azitem.addEventListener('touchend',function(e){

             e.preventDefault();

             $('.a-lists').css('background-color','transparent');

             $('.pop-AZ').css('display','none');

          })

      }

    },200);

着笔匆忙，仅实现原理，没有封装成插件！代码也显粗糙～