logo标签列表

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

javascriptjqueryhtmlhyperlinkoffset
3
我正在建立一个网站，希望在页面顶部设置一个固定位置为35像素高的菜单栏。在该菜单中，我有四个项目链接到页面下方的各个部分。当我点击链接时，页面会跳转到该部分，但是35像素高的菜单栏会覆盖文本顶部。
我该如何修改此站点，以便当我向下跳转到某个部分时，它不链接到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 -->
3个回答
7

描述

您可以使用 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>

更多信息

抱歉，我不理解。你有看过那个fiddle吗？ - dknaack
是的，我看到了那个fiddle。我应该把代码"$(window).scrollTop($('a[name="links"]').offset().top - 35);"放在HTML文件的<head>中吗？以前在那里它不起作用。 - tguidon
如果您发布“top-floating-bar”的CSS定义，我可以为您构建一个完整的工作示例。 - dknaack
"return false" 会防止滚动功能被执行多次。 - jlibert
3
假设你的菜单栏有一个类名为menubar，你可以尝试以下代码：
$('.menubar a').click(function() {

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

  return false;

});
嗯，似乎不起作用。我在顶部更新了我的菜单栏的完整代码。我将你的代码作为<script></script>实现在<head>中。我做错了吗？ - tguidon
将我给出的答案中的.menubar更改为.top-floating-bar，然后它应该可以工作。即$（'.top-floating-bar a'）.click（... - techfoobar
我不确定为什么这对我不起作用。我将其更改为top-floating-bar，但它仍然覆盖文本。我不应该将脚本放在头部吗？ - tguidon
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接