QQ登录

只需一步,快速开始

开启辅助访问 切换到宽版
搜索

[使用心得] 纯CSS解决HTML上的锚点偏移问题

[复制链接]
发表于 2015-4-23 13:14:01 |阅读模式
最近发现手机站中,锚点会被固定的页面顶部栏遮挡,找了好几天,终于找到采用纯CSS的解决办法。并根据东里书斋手机站的具体情况,做了点修订,下面是代码模板。


HTML部分:

  1. <div id="box1"></div>

  2. <div id="box2"></div>

  3. <a href="#hehe">点这里</a>

  4. <div id="box3"></div>

  5. <a id="hehe" class="target">
  6.    <span class="zhanwei"></span>
  7.    锚点在这里。
  8. </a>

  9. <div id="box4"></div>

  10. <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;}。
回复

使用道具 举报

发表于 2015-4-24 09:10:10
很艱深啊!
回复

使用道具 举报

发表于 2015-5-1 12:47:09

还好,只是HTML和CSS,我还能折腾,要是JS就只能折瞎了。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即註冊

本版积分规则

QQ|网站地图|小黑屋|Archiver|東里論壇 ( 粤ICP备14015598号 ) 公安备案图标粤公网安备 44512202000019号
GMT+8, 2022-12-6 09:13 , Processed in 0.115998 second(s), 49 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.