前端入坑纪 10
又是一个阳光明媚的周六，连续两三天的阴雨天气后，难得的放晴，连带心情都好了很多啊！
这回尝试做了个联系人的单页内跳转，希望对大家有启发！
OK，first things first！项目链接
效果截图
HTML 结构
<p id="tip">您还未添加<strong></strong>姓的联系人</p>
<ul id="libtns">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
<li>K</li>
<li>L</li>
<li>M</li>
<li>N</li>
<li>O</li>
<li>P</li>
<li>Q</li>
<li>R</li>
<li>S</li>
<li>T</li>
<li>U</li>
<li>V</li>
<li>W</li>
<li>X</li>
<li>Y</li>
<li>Z</li>
</ul>
<div class="wrp">
<ol>
<li>
<p id="U">U</p>
<ul>
<li>Ulruysa</li>
<li>Ulruysa</li>
<li>Ulruysa</li>
<li>Ulruysa</li>
<li>Ulruysa</li>
<li>Ulruysa</li>
</ul>
</li>
<li>
<p id="V">V</p>
<ul>
<li>vicdy</li>
<li>vicdy</li>
<li>vicdy</li>
<li>vicdy</li>
<li>vicdy</li>
<li>vicdy</li>
</ul>
</li>
<li>
<p id="W">W</p>
<ul>
<li>王曦1</li>
<li>王曦</li>
<li>王曦</li>
<li>王曦</li>
<li>王曦</li>
<li>王曦</li>
</ul>
</li>
<li>
<p id="X">X</p>
<ul>
<li>许毅1</li>
<li>许毅2</li>
<li>许毅4</li>
<li>许毅5</li>
<li>许毅6</li>
<li>许毅7</li>
</ul>
</li>
<li>
<p id="Y">Y</p>
<ul>
<li>杨毅1</li>
<li>杨毅2</li>
<li>杨毅4</li>
<li>杨毅5</li>
<li>杨毅6</li>
<li>杨毅7</li>
</ul>
</li>
<li>
<p id="Z">Z</p>
<ul>
<li>张成1</li>
<li>张成2</li>
<li>张成3</li>
<li>张成4</li>
<li>张成5</li>
<li>张成6</li>
</ul>
</li>
</ol>
</div>
开头的p是用来提示的，后面跟着的ul是用来点击的字母， ol里的每个li代表一个字母分类的姓名。
CSS 结构
html,
body,
ul,
li {
margin: 0;
padding: 0
}
::-webkit-scrollbar {
display: none
}
ul,
li {
list-style: none
}
.wrp {
background-color: #fefefe;
box-sizing: border-box;
border: 1px solid transparent;
}
#libtns {
position: fixed;
z-index: 99;
top: 0;
bottom: 0;
right: 0;
color: #fff;
width: 25px;
text-align: center;
background-color: rgba(0, 0, 0, .6);
display: flex;
display: -webkit-flex;
flex-flow: column wrap;
}
#tip {
opacity: 0;
transform: translateY(50px);
position: fixed;
background-color: rgba(0, 0, 0, .6);
border-radius: 3px;
padding: 6px;
width: 60%;
box-sizing: border-box;
color: #fefefe;
bottom: 0;
left: 20%;
text-align: center;
transition: all .3s ease-out;
}
#tip strong {
margin: 0 3px;
}
#tip.active {
opacity: 1;
transform: translateY(0);
}
#libtns li {
text-transform: capitalize;
font-size: 13px;
flex: 1;
width: 25px;
}
.wrp li p {
transition: all .3s ease-out;
}
.active {
background-color: #ccc;
}
点击用的字母是通过flex布局的，这样更好的适配屏幕高度。
关键的 JavaScript
var libtns = document.getElementById("libtns"),
otip = document.getElementById("tip"),
timer = "",
oatg = otip.getElementsByTagName("strong")[0],
pragfs = document.getElementsByTagName("p");
// 获取各个id对应的offsetTop高度，存入自定义的scorlHeit中
for (var i = 0; i < pragfs.length; i++) {
var sclHetVal = pragfs[i].offsetTop;
pragfs[i].setAttribute("scorlHeit", sclHetVal);
}
libtns.addEventListener("touchstart", function(evt) {
// 获取点击的字母对应id的p标签
var oletr = document.getElementById(evt.target.innerText);
// 每次点击后都要把前一次的计数器清除
clearTimeout(timer);
if (oletr) {
// 变换字母背景的效果
oletr.className = "active";
setTimeout(function() {
oletr.className = "";
}, 300);
// 获取对应字母的高度并滚动至该高度
var leterHeit = oletr.getAttribute("scorlHeit");
window.scrollTo(0, leterHeit);
// 提示效果的取消
otip.className = "";
} else {
// 提示效果
oatg.innerText = evt.target.innerText;
otip.className = "active";
// 1200ms后将提示效果的取消
timer = setTimeout(function() {
otip.className = "";
}, 1200);
}
}, false);
整个效果的关键是获取对应字母屏幕内位置，然后滚动到该位置。已编写了关键的注解，有兴趣的小伙伴，慢慢研究吧！
