dom特效 楼层导航 简单版（点击楼层 内容板块到浏览器顶部）

第一步 创建网页，书写布局和css样式

1. 用section标签，创建类名同为 class=content-part ，高度随意设置的内容盒子
2. 创建楼层导航盒子，用li标签添加 content-part 中部分文字
3. css样式中 导航盒子固定定位在浏览器右侧垂直居中，鼠标触碰li标签变成小手，清除页面中的默认margin和padding

第二步 在写JS事件监听之前，要在布局中添加一个特殊属性，该属性可以识别 li 标签 与 section 标签中对应的内容，为后续导航动画做关联铺垫

1. 由于该属性不属于W3C，这里我们用 data-n 命名，调用时使用 getAttribute
2. 在li和section中添加

3. 书写JS

3.1 事件委托 e.target是得到真正点击的事件，tagName是标签名，也就是得到真正点击的li标签的标签名。 toLowerCase 代表字符串转化为小写

3.2 得到真正点击的li标签的 data-n 的属性值，用 n 表示，也就是“语文、数学.....” e.target.getAttribute是获取特殊属性的固定写法

3.3 重新定义一个类名变量，得到对应的section标签

使用类名选择器querySelector得到所有的section，并用【】选择属性值，当 带有n的值 与 section标签data-n属性值相等，就得到这个section标签了

var contantPart=document.querySelector(' .content-part[data-n=' + n +'] ') 防止写错，单独写一下，写在if语句后

3.4 让contantPart距离浏览器顶部的高度，等于浏览器卷动的距离

document.documentElement.scrollTop=contantPart.offsetTop

普通楼层导航到这里就结束了，还可以进一步学习“楼层导航栏根据内容高度进行背景颜色的变化”