[英]Anchor navigation - target div should be always on the container top
I want to implement next behavior: When I click to link with anchor - target div should be reposition top his container top (container's height should be increased if needed). 我要实现下一个行为:单击链接与锚点链接时-目标div应该重新放置在其容器顶部的顶部(如果需要,应增加容器的高度)。 Here is a "html/css - draft" - http://jsfiddle.net/k2dGD/
这是“ html / css-草稿” -http://jsfiddle.net/k2dGD/
Please help me with javascript. 请使用JavaScript帮助我。
Html: 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>
$(function(){
$('.triggers a').click(function(){
var $item = $( $(this).attr('href') );
$(this).closest('div').next('.blocks').prepend( $item );
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.