解决点击锚点置顶内容被导航遮住

Posted 2020-09-14 WEB1010113045

工作中我第一次遇到这种情况，因为是接手公司的老项目，在原来项目的基础上修改，而且这项目里的相应文件都非常乱，结构、样式、行为都不分离的，处理起来有点棘手，看着代码脑袋都疼；由于点击锚点，内容会默认置顶，被导航栏遮住。一开始我都在网上找解决的方案，但是后来，我还是选择了一个比较笨的办法，就是将锚点所在的元素独立出来如下：

<a name="anchor" style="display:block;height:44px;margin-top:-44px;"></a>

　　给锚点所在元素设高度【元素的高度==导航栏的高度】，这样一来，锚点所在元素的下一个兄弟节点元素内容就不会被导航栏遮住了。但是可能会空出一部分，所以这时候就需要margin-top了，之所以margin-top：-44px，就是为了将锚点所在元素，所占的位置移动回去，这样就不会造成有空缺部分出现了。以上为我自己所遇到情况的解决方法。