使用ajax，頁腳和內容加載內容短暫地向上移動

我正在研究我的新投資組合，雖然它遠沒有完成，但我正在接近完成設計。只有一個問題，我不知道如何擺脫。如果你去http://minimalito.be/index.html你會進入主頁，然後當你點擊'關於'你會注意到頁腳跳到我的頁面頂部...使用ajax，頁腳和內容加載內容短暫地向上移動

當你從主頁到大約節，不僅頁腳移動，而且整個內容短暫地移動。有人會知道爲什麼嗎？內容加載了ajax，所以這可能與它有關，也許我定位一些div錯了？我真的沒有看到它。

這是我的代碼的粗略佈局，對於更詳細的代碼+示例，您當然可以檢查網站本身。

Thnx！

<div id="content" class="block"> 
     <div id="header"> 
      <nav class="centered"> 
       <h2><a href="index.html" class="menuLink">minimalito.</a></h2> 
       <ul> 
        <li><a href="design.html" id="aboutLink" class="menuLink">about.</a></li> 
        <li><a href="work.html" id="workLink" class="menuLink">work.</a></li> 
        <li><a href="#" id="contactLink">contact.</a></li> 
       </ul>  
      </nav> 
      <h1 id="contact" class="ninja">[email protected]</h1> 

      </div> 
      <div id="load">Loading</div> 

      <div id="page"> 


      </div> 
      <div id="footer"> 

      </div> 

    </div>

來源

2013-02-18 Jack

您的#header具有固定位置，因此它不是文檔流的一部分。 #content有一個頂部邊距，它會將#content和#footer向下推，以使它們位於#header#以下。

現在，當您點擊頂部的菜單鏈接fadeOut之一被調用#content其上設置display: none;就可以了。沒有任何東西可以將文檔流中的元素向下推動#footer一直移動到頁面的頂部，直到新內容異步加載。

而不必fadeOut的設置display到none考慮只是改變了opacity當元素是不可見的更換內容。

來源

2013-02-18 13:41:08 hsan

是的，完美的作品！ Thnx隊友。儘管如此，還有一件事。當從主頁轉到關於頁面時，內容仍然在短時間內與我的「口號」重疊，然後它將自己調整到正確的位置。即使我現在使用fadeTo而不是fadeIn或fadeOut。 – Jack 2013-02-18 16:29:12

它實際上並不是被移動的＃頁面，而是瀏覽器向下滾動。你的*關於*鏈接鏈接到錨點'＃design'，並且在你的頭版你有一個'div＃design'。 – hsan 2013-02-19 08:16:59

使用ajax，頁腳和內容加載內容短暫地向上移動

回答

相關問題