博客类型的内容网站，文章目录能很好的提升用户体验，通过目录可以清除整体结构，还可以通过目录进行导航，定位要浏览内容所在位置。下面通过Axure工具使用简单的元件实现文章目录导航的效果。

一、案例效果

 1、页面左侧为文章目录，内容滚动时左侧文章目录随之联动，案例中通过颜色变化定位浏览位置；

2、当点击左侧文章目录任一项时，右侧文章内容会导航定位到具体位置，这里设置了线性滚动的效果。

二、设计思路

1、页面布局规划：左侧为文章目录显示区域、右侧为文章内容显示区域；

2、右侧内容可垂直滚动，但是左侧文章目录位置固定，需要使用动态面板固定位置；

3、左侧动态面板中拖入文本标签，将文章各个章节作为目录依次排列，并设置选中时的样式，目录第一个默认选中；

4、上下滚动时通过浏览器窗口垂直方向的高度进行定位，根据文章内容章节元件的Y轴位置定位，给整个窗口添加滚动时交互动作，通过情形条件判断，控制文章目录的选中状态；

5、给文章目录文本标签添加单击事件，添加单击时页面滚动到元件的动作；