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，而且還試圖移動到一個絕對定位的對象。

編輯：這是一個修復，但潛在的問題是你鋪設對象的方式。絕對定位在漂浮事物時很好，但是在創建塊級元素時應該避免。