錨定導航 - 目標div應始終位於容器頂部

我想執行下一個行爲：當我點擊鏈接錨點時 - 目標div應該重新定位頂部他的容器頂部（容器的高度應該增加，如果需要的話）。這是一個「HTML/CSS - 草案」 - http://jsfiddle.net/k2dGD/錨定導航 - 目標div應始終位於容器頂部

請幫我使用JavaScript。

HTML：

<div class="triggers"> 
    <a href="#one">One</a> 
    <a href="#two">Two</a> 
    <a href="#three">Three</a> 
    <a href="#four">Four</a> 
    <a href="#five">Five</a> 
</div> 

    <div class="blocks"> 
    <div id="one" class="block"> 
     BLOCK ONE --- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem exercitationem dolores officiis omnis nostrum molestiae quo laboriosam iure placeat velit sit porro illum eius repellendus suscipit nemo dignissimos! Delectus atque. 
    </div> 
    <div id="two" class="block"> 
     BLOCK TWO --- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem exercitationem dolores officiis omnis nostrum molestiae quo laboriosam iure placeat velit sit porro illum eius repellendus suscipit nemo dignissimos! Delectus atque. 
    </div> 
    <div id="three" class="block"> 
     BLOCK THREE --- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem exercitationem dolores officiis omnis nostrum molestiae quo laboriosam iure placeat velit sit porro illum eius repellendus suscipit nemo dignissimos! Delectus atque. 
    </div> 
    <div id="four" class="block"> 
     BLOCK FOUR --- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem exercitationem dolores officiis omnis nostrum molestiae quo laboriosam iure placeat velit sit porro illum eius repellendus suscipit nemo dignissimos! Delectus atque. 
    </div> 
    <div id="five" class="block"> 
     BLOCK FIVE --- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem exercitationem dolores officiis omnis nostrum molestiae quo laboriosam iure placeat velit sit porro illum eius repellendus suscipit nemo dignissimos! Delectus atque. 
    </div> 
</div>

來源

2014-06-09 miles

你應該表現出在JavaScript的一些嘗試，並解釋哪兒有了問題。 – RacerNerd

歡迎來到SO。你應該努力解決你的問題，否則就像「嘿，你！爲我做！」不管我會盡力幫助你，因爲這是你的第一篇文章。如果你不明白代碼是怎麼編碼的，將來無論如何都要小心，不要犯同樣的錯誤，或者真的去找一位自由職業者。 –

$(function(){ 

    $('.triggers a').click(function(){ 
     var $item = $($(this).attr('href')); 
     $(this).closest('div').next('.blocks').prepend($item); 
    }); 

});

來源

2014-06-09 19:40:32

錨定導航 - 目標div應始終位於容器頂部

回答

相關問題