链接到HTML文档中的href时如何使用javascript偏移量？

Question

我正在建立一个带有固定位置菜单栏的网站，该菜单栏在页面顶部高35像素。 在该菜单中，我有四个项目链接到页面的各个部分。 当我单击链接时，页面跳至该部分，但35 px菜单栏覆盖了文本的顶部。

如何修改此站点，以便当我跳到某个部分时不会将我链接到HTML文档的确切部分，而是将其高35像素，以考虑静态菜单栏？

我这样做是用href代码：

<a href="#links"><li>Links</li></a>
<h1><a name="links">Links</a></h1>

谢谢！

编辑：菜单栏代码

<div id="top-floating-bar"> <!-- Menubar -->
<div class="row">
  <div class="column grid_12">
    <div class="fixed-bar-buttons">
      <ul>
        <a href="#top"><li>Home</li></a>
        <a href="#links"><li>Links</li></a>            
        <a href="#resume"><li>Resume</li></a>
        <a href="#social"><li>Social</li></a>
      </ul>
    </div>
  </div>
</div>
</div> <!-- End the Menubar -->

Answer 1

描述

您可以使用jQuery .offset()和.scrollTop()函数

与tguidon讨论后更新

我不知道您的top-floating-bar CSS的定义，但我知道您想要什么。 小提琴中菜单栏的大小不正确，因为我不知道您的定义。

查看jSFiddle 。

样品

HTML

<head>
    <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
    <script type="text/javascript"><
          $(function() {
            $(".goto").click(function() {
              var target = $(this).attr("href")
              target = target.substring(1,target.length);
              $(window).scrollTop($('a[name="'+target+'"]').offset().top - 35); 
              return false; 
            });
        });
    </script> 
</head>

<div id="top-floating-bar"> <!-- Menubar -->
<div class="row">
  <div class="column grid_12">
    <div class="fixed-bar-buttons">
      <ul>
        <a href="#top" class="goto"><li>Home</li></a>
        <a href="#links" class="goto"><li>Links</li></a>  
        <a href="#resume" class="goto"><li>Resume</li></a>
        <a href="#social" class="goto"><li>Social</li></a>
      </ul>
    </div>
  </div>
</div>
</div> <!-- End the Menubar -->

<br><br><br><br><br>
<a name="top"/> Top Section
<br><br><br><br><br><br><br><br>

<a name="links"/> Links Section
<br><br><br><br><br><br><br><br>

<a name="resume"/> Resume Section
<br><br><br><br><br><br><br><br>

<a name="social"/> Social Section
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>

链接到HTML文档中的href时如何使用javascript偏移量？

问题描述

3 个解决方案

解决方案1
7 已采纳 2012-01-10 15:57:33

描述

与tguidon讨论后更新

查看jSFiddle 。

样品

更多信息

解决方案2
3 2012-01-10 15:51:27

解决方案3
0 2012-01-10 15:57:22

链接到HTML文档中的href时如何使用javascript偏移量？

问题描述

3 个解决方案

解决方案1 7 已采纳 2012-01-10 15:57:33

描述

与tguidon讨论后更新

查看jSFiddle 。

样品

更多信息

解决方案2 3 2012-01-10 15:51:27

解决方案3 0 2012-01-10 15:57:22

解决方案1
7 已采纳 2012-01-10 15:57:33

解决方案2
3 2012-01-10 15:51:27

解决方案3
0 2012-01-10 15:57:22