javascriptページの読み込みによってページがバンプする

Question

divの形式でサブページを切り替えるためにJavaScriptを使用するページがあります。問題は、サブページ間をクリックすると、ページ全体が頻繁に上方向にスクロールされ、ナビゲーションバーの1つが非表示になることです。これはすべてのブラウザで発生します。

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を発射するだけでなく、絶対配置されたオブジェクトに移動しようとしているので、あなたはジャンプしています。

編集：これは修正ですが、基本的な問題は、オブジェクトをレイアウトする方法です。浮動小数点の場合、絶対配置は時間がかかりますが、ブロックレベルの要素を作成するときは避けるべきです。