链接到href'时如何使用javascript偏移量;s在HTML文档中

How can I use a javascript offset when linking to href's in HTML document?

本文关键字：偏移量 HTML 文档 javascript href 链接 何使用      更新时间：2023-09-26

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

描述

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

更多信息

  • jQuery.scrollTop（）
  • jQuery.offset（）

假设您的菜单栏有一个类menubar，您可以尝试以下操作：

$('.menubar a').click(function() {
  var y = $('a[name="'+$(this).attr('href').replace('#', '')+'"]').offset().top - 35;
  $(window).scrollTop(y);
  return false;
});

如果你想变得有趣，你可以使用http://demos.flesler.com/jquery/scrollTo/它内置了一个"偏移"选项。

相关文章：