tgu*_*don 3 html javascript jquery hyperlink offset
我正在建立一个网站,在我的页面顶部有一个35 px高的固定位置菜单栏.在该菜单中,我有四个项目链接到页面下方的部分.当我点击链接时,页面跳转到该部分,但35 px菜单栏覆盖了文本的顶部.
如何修改此网站,以便当我跳到某个部分时,它不会将我链接到HTML文档的确切部分,但考虑到静态菜单栏会高出35 px？
我用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()函数
我不知道你的top-floating-barcss是如何定义的,但我知道你想要什么.小提琴中菜单栏的大小不对,因为我不知道你的定义.
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>