我正在建立一个网站，其中包含一个固定位置菜单栏，在我的页面顶部高35 px。在该菜单中，我有四个项目链接到页面下方的部分。当我点击链接时，页面跳转到该部分，但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 -->
答案 0 :(得分：7)
您可以使用jQuery .offset()和.scrollTop()函数
我不知道你的top-floating-bar css是如何定义的，但我知道你想要什么。
小提琴中菜单栏的大小不对，因为我不知道你的定义。
<强> 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>
答案 1 :(得分：3)
假设您的菜单栏有一个类menubar，您可以尝试这样的事情：
$('.menubar a').click(function() {
var y = $('a[name="'+$(this).attr('href').replace('#', '')+'"]').offset().top - 35;
$(window).scrollTop(y);
return false;
});
答案 2 :(得分：0)
如果您想获得幻想，可以使用此http://demos.flesler.com/jquery/scrollTo/ 它内置了一个“偏移”选项。