Javascript 锚导航-目标div应始终位于容器顶部

我想实现下一个行为： 当我点击链接锚定-目标div应该重新定位顶部他的容器顶部（容器的高度应该增加，如果需要）。 这是一个“html/css-草稿”——

请帮我学习javascript

Html:

第一区——Lorem ipsum dolor sit amet，Concertetur Adipising Elite。我们的工作是全方位的分子研究，我们的工作是在一个充满生机和活力的世界里进行的！阿特克代表团。
第二座——奥雷姆·伊普苏姆·多洛·西特·阿梅特，圣殿骑士团。我们的工作是全方位的分子研究，我们的工作是在一个充满生机和活力的世界里进行的！阿特克代表团。
第三座——洛雷姆·伊普苏姆·多洛·西特·阿梅特，圣殿骑士团。我们的工作是全方位的分子研究，我们的工作是在一个充满生机和活力的世界里进行的！阿特克代表团。
第四座——奥雷姆·伊普苏姆·多洛·西特·阿梅特，圣殿骑士团。我们的工作是全方位的分子研究，我们的工作是在一个充满生机和活力的世界里进行的！阿特克代表团。
第五区——奥雷姆·伊普苏姆·多洛·希特·阿梅特，圣殿骑士团。我们的工作是全方位的分子研究，我们的工作是在一个充满生机和活力的世界里进行的！阿特克代表团。

您应该展示一些JavaScript尝试，并解释您遇到问题的具体位置。欢迎访问SO。你应该努力解决你的问题，否则就像“嘿，你！为我做吧！”不管怎样，我会尽力帮助你，因为这是你的第一篇文章。不管怎样，以后要小心，不要再犯同样的错误，或者如果你不懂如何编写代码，就去找一个自由职业者。

 <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 );
    });

});