javascript页面加载导致页面凹凸

Question

我有一个页面，它使用Javascript在divs形式的子页面之间切换。问题是，当我点击子页面时，整个页面经常会被向上推，并隐藏我的导航栏之一。这发生在所有浏览器中。

http://www.victorsheckels.com

页面的相关部分：

<div id="main" class="content" style="position:absolute; top:64px; left:176px; right:32px; bottom:32px;z-index:11;visibility:hidden;overflow-y:auto; overflow-x:hidden"> 
<div id="book" class="content" style="position:absolute; top:64px; left:176px; right:32px; bottom:32px;z-index:12;visibility:visible;overflow-y:auto; overflow-x:hidden"> 
<div id="copyright" class="content" style="position:absolute; top:64px; left:176px; right:32px; bottom:32px;z-index:13;visibility:hidden;overflow-y:auto; overflow-x:hidden"> 

    <script> 
function getSub() { 
    var section = location.hash.slice(1); 
    if (section == 'about') showMain(); 
    if (section == 'library') showBook(); 
    if (section == 'copyright') showCopyright(); 
} 


function showMain() { 
    hideBook(); 
    hideCopyright(); 
    document.getElementById("main").style.top = "64px"; 
    document.getElementById("main").style.visibility = "visible"; 
    document.getElementById("mainnav").style.background = "rgba(255, 153, 0, 0.3)"; 
    document.getElementById("mainnav").style.borderBottom = "#FF9900 1px solid"; 
} 

function hideMain() { 
    document.getElementById("main").style.top = "100%"; 
    document.getElementById("main").style.visibility = "hidden"; 
    document.getElementById("mainnav").style.background = "rgba(255, 153, 0, 0)"; 
    document.getElementById("mainnav").style.borderBottom = "#009900 1px solid"; 
} 

function showBook() { 
    hideMain(); 
    hideCopyright(); 
    document.getElementById("book").style.top = "64px"; 
    document.getElementById("book").style.visibility = "visible"; 
    document.getElementById("booknav").style.background = "rgba(255, 153, 0, 0.3)"; 
    document.getElementById("booknav").style.borderBottom = "#FF9900 1px solid"; 
} 

function hideBook() { 
    document.getElementById("book").style.top = "100%"; 
    document.getElementById("book").style.visibility = "hidden"; 
    document.getElementById("booknav").style.background = "rgba(255, 153, 0, 0)"; 
    document.getElementById("booknav").style.borderBottom = "#009900 1px solid"; 
} 

function showCopyright() { 
    hideMain(); 
    hideBook(); 
    document.getElementById("copyright").style.top = "64px"; 
    document.getElementById("copyright").style.visibility = "visible"; 
    document.getElementById("copyrightnav").style.background = "rgba(255, 153, 0, 0.3)"; 
    document.getElementById("copyrightnav").style.borderBottom = "#FF9900 1px solid"; 
} 

function hideCopyright() { 
    document.getElementById("copyright").style.top = "100%"; 
    document.getElementById("copyright").style.visibility = "hidden"; 
    document.getElementById("copyrightnav").style.background = "rgba(255, 153, 0, 0)"; 
    document.getElementById("copyrightnav").style.borderBottom = "#009900 1px solid"; 
} 

function showZ1Preview() { document.getElementById("bookpic").style.backgroundImage = "url('zw1.jpg')"; } 

function showD1Preview() { document.getElementById("bookpic").style.backgroundImage = "url('dw1.jpg')"; } 

function showD2Preview() { document.getElementById("bookpic").style.backgroundImage = "url('dw2.jpg')"; } 

function showD3Preview() { document.getElementById("bookpic").style.backgroundImage = "url('dw3.jpg')"; } 
</script> 


.content { 
    padding-bottom   : 16px; /* 1/16 */ 
    padding-left    : 16px; /* 1/16 */ 
    color      : #CCCCCC; 
    border     : #000000 solid 1px; 
    border-top    : #009900 solid 1px; 
    border-bottom-left-radius : 40px; 
    background    : rgba(0, 0, 0, 0.3); 
    transition    : all 1s; 
} 

Answer 1

的链接删除您href="#copyright"导航到版权标签。你在跳，因为你不仅在射击你的js，而且还试图移动到一个绝对定位的对象。

编辑：这是一个修复，但潜在的问题是你铺设对象的方式。绝对定位在漂浮事物时很好，但是在创建块级元素时应该避免。