背景介绍

产品的需求是：

1.个人信息下面的小项，点击每一个menu，该项详情模块滚动到顶部

2.滚动右侧页面信息，当页面顶部展示某模块的内容时，对应的menu菜单选中。

过程分析

根据产品的需求，第一反应这就是锚点的问题，使用a标签设置锚点问题就能解决。然而在开发过程中发现a标签的锚点名称时通过name属性设置的，而name属性在html5中已经废弃掉了。于是考虑自己模拟实现a标签的锚点功能。

第一步，初始化模块高度，通过方法计算每一个模块的高度，比如固定的直接写死高度，不固定的初始化为0

 const scrollMapping={
 model1: 0,
 model2: 272,
 model3: 228,
 model4: 0,
 model5: 272
 }

第二步，在组建渲染完成后，componentDidMount方法中计算每个模块的区间，保存在数组scrollRange。

最后，以上两步完成后，开始去实现两个需求，

第一个点击menu，模块内容滚动到顶部，主要是通过url后的字段判断，比如http://www.abc.com/test#model3，此时通过遍历Object.keys(scrollMapping)，累加model*的高度，碰到model3结束，获取整个高度为tranlateY，然后将滚动内容区块通过scrollTop属性设置tranlateY，

第二个，滚动内容区块，实现menu选中，主要思路就是看内容区块的scrollTop在scrollRange的哪个区间，比如在index为2-3之间，此时取2，然后通过Object.keys(scroppMapping)[2]就可以获取定位的菜单

参考链接

1. https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a

天我们来看下html中<a></a>的特点与功能

一 .a标签是超链接标签，首先我们说一下它的特点：

1.在网页中默认会有下划线

2.不会继承父级的颜色样式

其中，自带的下划线不美观，但我们可以用以下代码解决，ctrl+s保存后，下划线就没有了

二 .下面我们来看看a标签的几个功能：

1.跳转页面

href 属性要跳转页面的地址（没地址的情况下可以写一个#）,即可以给网络的地址也可以给本地的地址

target 属性

值：_blank在新页面打开

_self 在本页面打开（默认的）

2.锚点

作用：网页太长时，通过点击页面某一个导航，页面直接到达该内容，网页还是该网页，只是向下自己滑动。

实现方法：在 href 的值里写上#name,name对应id的值

下面是一个简单例子，点击颜色就会跳转到相应颜色区域

3.下载

作用：实现网页的下载功能

实现方法：在 href 里写上文件的地址就可以了

注意：如果你要下载的文件浏览器能够读出来，那它就不会被下载，而是会被直接打开。如果就想让浏览器下载所有文件，那就在a标签里添加一个属性download（ h5 新增属性，不兼容IE低版本），它的值写上文件的名字加后缀名

三.此外，介绍一下a标签的颜色，给a标签换颜色也是会经常用到的，但是怎么改呢？

这里用到了“伪类”，伪类：针对元素的某种状态添加的不同样式

a :link 未访问链接的（颜色）状态

:visited访问过的链接的（颜色）状态

:hover鼠标移入（悬停）（颜色）状态

:active鼠标按下不动时候的（颜色）状态

今天的a标签就介绍到这里，你学到了吗？