锚定导航 - 目标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应始终位于容器顶部

回答

相关问题