點擊一個按鈕後，當div可見時，主體內容會移動到頂部

Question

我想在單擊magento中的按鈕後顯示div。

代碼

<div id="clickme" style="background-color: #333333; color: #FFFFFF; padding: 10px; width: 200px; cursor:pointer;">Click here to toggle me in and out</div> 
<div id="me" style="display: none !important;"> <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('footerbanner')->toHTML();?></div> 
<script type="text/javascript"> 
jQuery.noConflict(); 
jQuery(document).ready(function($) { $('#clickme').click(function() { $('#me').animate({ 
      height: 'toggle' 
      }, 1000 
    ); 
}); 
}); 

其工作。但通過此代碼頁腳移動，但我希望身體內容轉移到頂部而不是頁腳。請幫我...

Answer 1

與您的頁腳DIV試試這個，

<div id="footer" style='position:fixed;bottom: 0px;height: 40px;float: left;'>footer footer footer footer </div> 

所以，頁腳會一直在頁面的底部顯示...

Live Demo

編輯： 根據您的要求，只是試試這個，

HTML

<div id="Content_div" style="height: 400px;"> 
</div> 

<div id="ja-botsl"> 
    <div class="main col4-set clearfix"> 
     <div style="height: 200px;" class="main-inner clearfix"> 
     </div> 
     <span class='imgExpandSpan' id="ja-expand-trig">&nbsp;</span> 
    </div> 
</div> 

<div id="footer_div" style="height: 100px;"> 
</div>​ 

CSS

<style type="text/css"> 
    .imgExpandSpan 
    { 
     background: url("https://bangalore/Ogo/Content/Images/arrow-green.png") no-repeat scroll center center #111111; 
     cursor: pointer; 
     height: 30px; 
     left: 50%; 
     position: absolute; 
     top: -29px; 
     width: 60px; 
    } 
    .imgExpandSpan.expand 
    { 
     background-image: url("https://bangalore/Ogo/Content/Images/arrow-red.png"); 
    } 

    #ja-botsl 
    { 
     background: none repeat scroll 0 0 #111111; 
     border-top: 1px solid #CCCCCC; 
     color: #666666; 
     position: relative; 
     z-index: 2; 
    } 
</style> 

JQuery的

你應該使用下面的插件給出

prototype.js

ja.script.js

這裏是Live Demo

注：ja.script.js腳本有我們所有的單擊事件的ID &擴大內部的DIV ID。因此，我們可以更改身份證號碼。,,