实现微信通讯录的前端动效

最近公司要是实现一个类似于微信通信录的品牌列表，于是自己动手实现了这个功能，这里主要讲的是如何通过手指滑动，来实现列表页面的滚动。
如果是通过点击给实现页面的滚动，大家基本上都能实现，甚至不用js就可完成，所以这里就不细讲了。重点将如何通过touch事件完成这个功能。首先你得了解touch事件,有touchstart,touchmove,touchend…具体怎么用大家google一下就明白了，实现我要讲的功能需要用到touchmove事件。
首先你得有一个思路：
①监听手指滑动的事件
②获取手指滑动经过的dom元素
③将页面滚动到预期的位置
其中①和③并不难，难点在于②，touch事件的target，targetTouches，changeTouches等等都可以个获得dom元素，但是只是你手指第一次碰触的dom元素，而没有动态的获取dom元素。所以这里要用到document.elementFromPoint()方法，具体细节大家Google吧。它的主要功能是可以根据页面的坐标点获取dom元素，而通过target，targetTouches，changeTouches等事件均可以获取手指在屏幕上的坐标点，所以我们可以根据这个来获取dom元素。但是这里有一个前提，就是元素必须是最高层级，不然获取的元素会错误。所以大家可以通过这种方法来实现微信通信录手指滑动的特效。
注意：
①touch是冒泡事件，有默认滚动行为，所以你要禁止。
②最好不要用name或id在页面直接跳转，最好使用jquery的animate方法，提高用户体验。
③我们知道锚点与页面是分离的，所以我们可以使用data来保存对应滚动标题的属性，例如标题的name=”title1”,锚点的data-name=”title1”这样使用getAttribute()获得属性值，直接用于getElementsByName()获取标题元素了。
④使用stop()取消未完成的动画，因为手机上操作快而且频繁，所以要及时清理未完成的动画。
下面就是我的代码：
html:

extends layout
block style
link(rel='stylesheet', href='/stylesheets/brandList.css')
block content
div#brandsList
ul.brands(v-for="(value,key) in brands",:key="brand")
a(:name="'anchor'+key")
li.brand-name { {key}}
ul.brands-value(v-for="brand in value",:key="brand")
li.brand-value { {brand}}
ul#anchors
li.anchor(v-for="(value,key) in brands",:key="brand")
a(:data-name="'anchor'+key", href="#", @click.prevent="moveTarget") { {key}}
block localScripts
script(type="text/javascript", charset="UTF-8", src="/javascripts/brandList.js")

样式表

#brandsList{
  .brands{
    position: relative;
    z-index: 1;
    .brand-name{
      background-color: #00343f;
      color: #37C6C0;
      font-size: 0.96rem;
      line-height: 1.5em;
      border-top: 1px solid #000;
      border-bottom: 1px solid #000;
      .brands-value{
        .brand-value{
          background-color: #D0E9FF;
          color: #1DB0B8;
          font-size: 0.8rem;
          height: 1.6rem;
          line-height: 2em;
          border-bottom: 1px solid #808080;
          text-indent: 1rem;
        }
      }
    }
  }
}

#anchors{
  position: fixed;
  right: 0;
  top: 10%;
  width: 20%;
  z-index: 10000;
  background-color: rgba(255,255,255,0);
  text-align: center;
  .anchor{
    font-size: 0.64rem;
    line-h