js 导航滚动 滚动条原理讲解

在制作导航时，希望左边的导航和右侧的内容区域可以联动显示，例如：左侧导航点到某个标题后，右侧的内容区域自动将此标题置顶

像Word中的导航窗口：

点击导航中的“文章2”时，右侧的内容区，自动将“文章2”内容滚动到置顶位置进行显示。

但是再点击“文章3”“文章4”时，右侧的内容区域就无法将其内容，滚动到置顶位置了。

滚动条展示原理图：

从上图可知：

可视区域高度/内容高度 = 滚动条长度/滚动条总长；

可滚动距离=内容高度-可视区域高度；

而 从图又可知：滚动条总长 = 可视区域高度。

假设内容高度=200，可视区域长度 =100，,当有个【目标元素】距离顶部125，当我们想让其滚动到顶部时，就会出现如下情况：