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

【问题标题】：How can I use a javascript offset when linking to href's in HTML document?链接到 HTML 文档中的 href 时如何使用 javascript 偏移量？
【发布时间】：2012-02-07 00:44:22
【问题描述】：

我正在构建一个网站，其页面顶部有一个 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 -->

【问题讨论】：

标签： javascript jquery html hyperlink offset

【解决方案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>

更多信息

【讨论】：

?对不起，我不明白。你看到小提琴了吗？
是的，我看到了小提琴。我会放置代码“ $(window).scrollTop($('a[name="links"]').offset().top - 35);”在 HTML 文件的中。它以前在那里不起作用。
如果您发布 top-floating-bar 的 css 定义，我可以为您构建一个完整的工作示例
很高兴为您提供帮助！祝你有美好的一天！
那个“return false”位会阻止滚动功能被多次执行

【解决方案2】：

如果你想变得花哨，你可以使用这个http://demos.flesler.com/jquery/scrollTo/ 它内置了一个“偏移”选项。

【讨论】：

【解决方案3】：

假设你的菜单栏有一个 menubar 类，你可以试试这样：

$('.menubar a').click(function() {

  var y = $('a[name="'+$(this).attr('href').replace('#', '')+'"]').offset().top - 35;
  $(window).scrollTop(y);

  return false;

});

【讨论】：

嗯，这似乎不起作用。我用我的菜单栏的完整代码更新了顶部。我在中将您的代码实现为。我做错了吗？
在我给出的答案中将.menubar 更改为.top-floating-bar，它应该可以工作。即$('.top-floating-bar a').click(...
我不确定为什么这对我不起作用。我将其更改为 top-floating-bar 并且它仍然覆盖文本。我不应该把脚本放在头上吗？