在制作导航时，希望左边的导航和右侧的内容区域可以联动显示，例如：左侧导航点到某个标题后，右侧的内容区域自动将此标题置顶
点击导航中的“文章2”时，右侧的内容区，自动将“文章2”内容滚动到置顶位置进行显示。
但是再点击“文章3”“文章4”时，右侧的内容区域就无法将其内容，滚动到置顶位置了。
从上图可知：
可视区域高度/内容高度 = 滚动条长度/滚动条总长；
可滚动距离=内容高度-可视区域高度；
而 从图又可知：滚动条总长 = 可视区域高度。
假设内容高度=200，可视区域长度 =100，,当有个【目标元素】距离顶部125，当我们想让其滚动到顶部时，就会出现如下情况：
可滚动距离=200-100，而目标元素在125的位置，所以【目标元素】也就无法滚动到顶端。
而想要实现滚动到顶部，就要使其 目标滚动距离<可滚动距离
显而易见，最简单的方法就是补充【内容区域】的高度。而需要补充的长度=目标距离-可滚动距离。
在实际处理中，我们可以借助一个“补充高度的元素”,利用calc动态计算高度，然后通过设置min-height 来实现相关的滚动
min-height:calc(100% - 底部元素高度);
一个简单的示例：
这里footer就是用来补充高度的
<html lang="en"> <head> <style> div { height: 200px; border: 1px solid; } #c{ height:150px; } .container { height: 300px; overflow: scroll; } .footer{ /* 这里的150px是 div C的高度 100%是父级元素的高度 */ min-height: calc(100% - 150px); } </style> </head> <body> <a href="#a">文章A</a> <a href="#b">文章B</a> <a href="#c">文章C</a> <div class="container"> <div id="a"> <h2>文章A</h2> </div> <div id="b"> <h2>文章B</h2> </div> <div id="c"> <h2>文章C</h2> </div> <footer class="footer"></footer> </div> </body> </html>
