zoukankan      html  css  js  c++  java
  • 锚链接偏移

    锚点定位偏移没解决之前,点击后锚点区域居于body顶部。

    如果网站上有些元素是 absolute 或者 fixed 在顶部的,那么,这些元素就会遮住锚链接的元素。

    因此,就需要利用css或者js来使锚链接元素偏移。

    方法1:

    利用 padding-top 和 margin-top 来解决

    <a href="#box">box</a>
    <div class="box" id="box">1<br />2<br /></div>
    .box{
       padding-top:50px;
       margin-top:-50px;  
    }

    利用padding-top将锚点上移50px,再用margin-top将内容上移50px,修复锚点区域和内容区域padding-top产生的不必要的偏移。

    方法2:

    利用css3的 :target 

    .box:target{
       padding-top:50px;
    }

    :target声明只支持现代浏览器,IE浏览器支持 IE9+

    方法3:

    可以在元素前面新添加一个元素,设置高度,本元素设置margin-top负值,其实现原理类似方法1.

    方法4:

    使用js解决

    $(function(){
      if(location.hash){
         var target = $(location.hash);
         if(target.length==1){
             var top = target.offset().top-44;
             if(top > 0){
                 $('html,body').animate({scrollTop:top}, 1000);
             }
         }
      }
    });

    类似博客 http://segmentfault.com/q/1010000000124208

  • 相关阅读:
    html 锚点
    html table 表格详解
    IE6 不识别css固定元素位置(fixed)属性
    css hack 方法总汇2
    css hack 方法总汇1
    JS刷新父窗口的几种方式
    手动切换选项卡
    自动切换选项卡
    jquery 判断 radio,checkbox,select是否被选中
    EasyUI 各种json数据格式
  • 原文地址:https://www.cnblogs.com/ayseeing/p/3596435.html
Copyright © 2011-2022 走看看