我正在构建一个网站,在我的页面顶部有一个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/它内置了一个"偏移"选项。