我尝试创建一个网页,顶部有一个固定的导航栏,覆盖下面的内容.当在网址中加载带锚点的页面时,正常的行为是页面将锚点滚动到窗口的顶部.但是那个内容隐藏在导航栏下面.所以我尝试使用JavaScript scrollTo()来解决这个问题.我的解决方案适用于Firefox和Opera,但不适用于Chrome.请试试这个例子.有关如何在Chrome中解决此问题的任何想法？谢谢.
TEST.HTM:
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<meta charset='UTF-8'>
<style type='text/css'>
#navi { position:fixed; left:0; top:0; width:100%; height:100px; background-color:yellow; }
#spacer { background-color:cyan; height:100px; }
#spacer2 { height:1000px; }
.style1 { background-color:green; height:200px; }
</style>
<script type='text/javascript'>
/* <![CDATA[ */
function scrollAnchor() { // doesn't work in Chrome
var y = document.getElementById(window.location.hash.substr(1)).offsetTop - 110;
window.scrollTo(0, y);
//alert(y);
}
/* ]]> */
</script>
</head>
<body id='top' onload='scrollAnchor();'>
<div id='navi'>
<a href='./test2.htm'>Menu</a>
</div>
<div id='main'>
<div id='spacer'></div>
<h3 id='1'>Heading 1</h3><p class='style1'></p> …