链接到一个地区略高于网页的特定部分

<a href="#link">clicking here</a>

<a name="link">goes here</a>

简单，但问题是，我的网站有一个保持一个固定的位置头在页面的顶部，所以当用户点击链接时，我希望他们去的地方被标题隐藏。所以我想我真的希望他们最终达到我真正希望他们看到的一定数量的像素。我已经尝试将目标链接放在上面的位置，但是它是一个文本块，因此它随着不同的屏幕大小而变化，因此不一致。

我想知道是否有任何方法可以解决这个问题，也许与CSS的东西。

在此先感谢。

来源

2012-03-13 Nathan B

可以提供的jsfiddle？ – Nitesh 2013-05-10 06:31:14

您可以使用jQuery方法，以便当单击带有＃的链接时，它会找到要去的元素的位置，然后移动到目标上方X个像素的位置。

事情是这样的：

$(function(){ 

    var positionOffset = 50; 

    $('a[href=*"#"]').click(function(){ 

     var targetHash = this.hash; 
     if(targetHash.length > 0 && targetHash == window.location.hash){ 

      var elementPosition; 

      if($(targetHash).length){ 

       elementPosition = $(targetHash).offset(); 

      } else { 

       var targetAnchor = targetHash.replace("#", ""); 
       elementPosition = $('a[name="' + targetAnchor + '"]').position(); 

      }  

      $(window).scrollTop(elementPosition.top - positionOffset);  
      return false;  

     } else { 
      return true; 
     } 

    }); 

});

来源

2012-03-13 21:48:36

我意识到这是一岁多，但对于其他人的利益谁遇到它：

稍微简单的解决方法是把填充在您使用链接定位的部分的顶部。

HTML：

<section id="section_name"> 

    ...Your stuff here... 

</section>

CSS：

#section_name { 
    padding-top: 40px; 
}

来源

2013-05-10 06:12:58 Sam

链接到一个地区略高于网页的特定部分

回答

相关问题