移动端滚动问题

Question

如图，是我做的web app的一个选择城市的页面，需求就是上半部分一直到字母表结束都是固定不动的，下面的城市列表可以滚动，也可以点击字母滚动到对应位置。
请问如何获取并控制滚动条滚动的距离？？？
搞了好久都没搞出来，不论是body,还是下面可以滚动的部分scrollTop一直是0，不知道为什么？
唯一有变化的属性就是offsetTop,可是offsetTop是只读的，没办法控制。

所以，
我用的是控制下半部分的style.top(加了position:absolute)来实现点击的。
这样只是点击是正常的，但如果下面位置有滚动的话，不论再点那个字母，下面的位置都会错同样的高度，我猜测是scrollTop起作用了，但是scrollTop在控制台打出来就是0，一直是0，好纠结呀。

这到底是怎么回事？怎么才能控制滚动条的距离？求高手指点迷津。

Answer 1

通过 scrollTop 思路是对的，不过一般浏览器需要使用 document.documentElement.scrollTop 设置，firefox 是 document.body.scrollTop。

var docEl = navigator.userAgent.indexOf('Firefox') !== -1 ? document.documentElement : document.body;

Answer 2

你这个是用web来做App嘛？你可以试试DeviceOne这个平台，js使用indexlistview的组件，就是专门做这个列表的，而且还有就是有英文二十四个字母的引导。