纯CSS解决HTML上的锚点偏移问题

東里山人

最近发现手机站中，锚点会被固定的页面顶部栏遮挡，找了好几天，终于找到采用纯CSS的解决办法。并根据东里书斋手机站的具体情况，做了点修订，下面是代码模板。


HTML部分：

1. <div id="box1"></div>
   
2. 
   
3. <div id="box2"></div>
   
4. 
   
5. <a href="#hehe">点这里</a>
   
6. 
   
7. <div id="box3"></div>
   
8. 
   
9. <a id="hehe" class="target">
   
10.    <span class="zhanwei"></span>
    
11.    锚点在这里。
    
12. </a>
    
13. 
    
14. <div id="box4"></div>
    
15. 
    
16. <div id="box5"></div>

复制代码

CSS部分：

1. *{
   
2.   margin:0;
   
3.   padding:0;
   
4. }
   
5. #box1{
   
6.     height: 50px;
   
7.     background:grey;
   
8.     position:fixed;
   
9.     top:0;
   
10.     left:0;
    
11.     right:0;
    
12.     z-index:100;
    
13. }
    
14. #box2{
    
15.     height:200px;
    
16.     background:green;
    
17. }
    
18. #box3{
    
19.     height:600px;
    
20.     background:pink;
    
21. }
    
22. #box4{
    
23.     height:600px;
    
24.     background:purple;
    
25. }
    
26. #box5{
    
27.     height:600px;
    
28.     background:yellow;
    
29. }
    
30. .target {
    
31.   position: relative;
    
32. }
    
33. .zhanwei {
    
34.   position: absolute;
    
35.   display:block;
    
36.   width:100px;   //小于父级宽度的值
    
37.   height:50px;   //高度值为顶部固定块的高度
    
38.   top: -50px;    //值为顶部固定块的高度
    
39.   z-index:-100;
    
40. }

复制代码

上面代码中，box1及其样式可以不要，不影响锚点的偏移效果。在实际使用中，//及后面的注释可以不要。

这个办法，其实就是在锚点之前，建立一个暗锚，并设置他的高度，用以占位。

在我的网站中，因为href和id是互相指向的，所以.zhanwei必须有 z-index，并且要采用负数值，否则zhanwei框会影响处于此框范围内的其他有href的元素。

如果不考虑多锚点的遮挡问题，也可以不要zhanwei所在的span，直接在target的样式代码中增加：{padding-top: 50px;margin-top: -50px;}。

ruru

很艱深啊！

東里山人

ruru 發表於 2015-4-24 09:10
很艱深啊！

还好，只是HTML和CSS，我还能折腾，要是JS就只能折瞎了。