这个要模拟得好的话必须得结合js才行的，光是那排字母就不光是点击，应该要支持手指在上面精确的滑动到某个字母范围，这个一时半会写不出来。你可以去网上找个常见的JQ滚屏插件来改动下自己琢磨。
简单的办法，ABCD..XYZ做成锚链接，加个js平滑滚动，样式你自己想办法完善，把A-Z那排链接display: block后设置成正方形方块，加个ul>li套上用定位放到左上角即可：
<!DOCTYPE html><html>
<body>
<style type="text/css">
h2:target{
background:#00C}
}
</style>
<body>
<a href="#L">L</a>
<a href="#W">W</a>
<p style="height:500px">占位区</p>
<h2 id="L">L开头的电话</h2>
<p>李四</p>
<p>黎明</p>
<p style="height:500px">占位区</p>
<h2 id="W">W开头的电话</h2>
<p>王波</p>
<p>网名</p>
</body>
</html>
<script>
/* Smooth scrolling(平滑滚动到锚链接)
Changes links that link to other parts of this page to scroll
smoothly to those links rather than jump to them directly, which
can be a little disorienting.
sil, http://www.kryogenix.org/
v1.0 2003-11-11
v1.1 2005-06-16 wrap it up in an object
*/
var ss = {
fixAllLinks: function() {
// Get a list of all links in the page
var allLinks = document.getElementsByTagName('a')
// Walk through the list
for (var i=0i<allLinks.lengthi++) {
var lnk = allLinks[i]
if ((lnk.href && lnk.href.indexOf('#') != -1) &&
( (lnk.pathname == location.pathname) ||
('/'+lnk.pathname == location.pathname) ) &&
(lnk.search == location.search)) {
// If the link is internal to the page (begins in #)
// then attach the smoothScroll function as an onclick
// event handler
ss.addEvent(lnk,'click',ss.smoothScroll)
}
}
},
smoothScroll: function(e) {
// This is an event handler get the clicked on element,
// in a cross-browser fashion
if (window.event) {
target = window.event.srcElement
} else if (e) {
target = e.target
} else return
// Make sure that the target is an element, not a text node
// within an element
if (target.nodeName.toLowerCase() != 'a') {
target = target.parentNode
}
// Paranoia check this is an A tag
if (target.nodeName.toLowerCase() != 'a') return
// Find the <a name> tag corresponding to this href
// First strip off the hash (first character)
anchor = target.hash.substr(1)
// Now loop all A tags until we find one with that name
var allLinks = document.getElementsByTagName('a')
var destinationLink = null
for (var i=0i<allLinks.lengthi++) {
var lnk = allLinks[i]
if (lnk.name && (lnk.name == anchor)) {
destinationLink = lnk
break
}
}
if (!destinationLink) destinationLink = document.getElementById(anchor)
// If we didn't find a destination, give up and let the browser do
// its thing
if (!destinationLink) return true
// Find the destination's position
var destx = destinationLink.offsetLeft
var desty = destinationLink.offsetTop
var thisNode = destinationLink
while (thisNode.offsetParent &&
(thisNode.offsetParent != document.body)) {
thisNode = thisNode.offsetParent
destx += thisNode.offsetLeft
desty += thisNode.offsetTop
}
// Stop any current scrolling
clearInterval(ss.INTERVAL)
cypos = ss.getCurrentYPos()
ss_stepsize = parseInt((desty-cypos)/ss.STEPS)
ss.INTERVAL =
setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10)
// And stop the actual click happening
if (window.event) {
window.event.cancelBubble = true
window.event.returnValue = false
}
if (e && e.preventDefault && e.stopPropagation) {
e.preventDefault()
e.stopPropagation()
}
},
scrollWindow: function(scramount,dest,anchor) {
wascypos = ss.getCurrentYPos()
isAbove = (wascypos < dest)
window.scrollTo(0,wascypos + scramount)
iscypos = ss.getCurrentYPos()
isAboveNow = (iscypos < dest)
if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
// if we've just scrolled past the destination, or
// we haven't moved from the last scroll (i.e., we're at the
// bottom of the page) then scroll exactly to the link
window.scrollTo(0,dest)
// cancel the repeating timer
clearInterval(ss.INTERVAL)
// and jump to the link directly so the URL's right
location.hash = anchor
}
},
getCurrentYPos: function() {
if (document.body && document.body.scrollTop)
return document.body.scrollTop
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop
if (window.pageYOffset)
return window.pageYOffset
return 0
},
addEvent: function(elm, evType, fn, useCapture) {
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture)
return true
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn)
return r
} else {
alert("Handler could not be removed")
}
}
}
ss.STEPS = 25
ss.addEvent(window,"load",ss.fixAllLinks)
</script>
关于利用锚点定位的一个新思路：首先，通过锚点定位，页面都是转到页面相应锚点居于顶端。因此，对于需要使页面高度不变而只是利用锚点效果的使用来说，这非常不方便。现在有一个思路，即，若想锚点距离顶端有个固定的距离，则设置该锚点所在元素的border-top/padding-top=x，margin-top=-x，使该锚点及位于锚点前的元素为relative，z-index方面，则是锚点前元素大于锚点元素，那么就像两张扑克牌一样层叠起来，隐藏了锚点元素的真实位置，使视觉效果上成功。讲到这里，对于之前提及的利用<a>元素的锚点效果，实现静态页面的切换页效果，更进了一步。↑上面是我关于锚点学习总结后的话，具体实例可以参考下面网站的演示，我也是受这个网站的启发 http://www.webjx.com/css/divcss-17544.htmlCSS 有很多令人欣喜的小技巧，可以让我们的页面效果更加美丽，现在，就让我们来看看工作中非常实用的 CSS 技巧吧。
当我们选中网页上的文字时，通常的效果是蓝底白字，其实，底色和字体颜色是可以改变的。
我们可以使用伪元素来实现这种效果：
首字下沉，是否似曾相识呢？哦，是在以前学 word 软件文字排版的时候。在一些报纸上经常都会看见首字下沉的效果，其他文字围绕在它周围。
看上去还是这么回事。
通过锚点，我们可以滚动到网页特定的位置，原始的锚点跳转是没有过渡效果的。注意滚动条：
通过 CSS scroll-behavior 属性可以让滚动变得更加丝滑。
caret-color 属性可以让我们自定义 input 框闪烁的光标，是不是很神奇鸭
给透明背景图片加背景，感觉很厉害的样子。两行 CSS 样式九搞定咯：
我们可以修改滚动条的样式，滚动条变得更加炫酷。
如果你不想让用户选中页面上的文字，就可以用这个特性了。
很多情况下都需要应用到IE盒子模型的特性，让元素的宽度、高度包含border和padding。
