jqueryでスライドした状態でクリックした後、要素にスクロールします

Question

私はこのような次の要素にスクロールする方法を探していました：

http://www.grittirollo.it/

これらの大きな文字をクリックすると、クリックした後に現在の要素にスクロールし、効果をスライドさせます。

私の試みがあります：（jsfiddle： http://jsfiddle.net/d272p/)

HTML

<div id="head1">Click</div>
<div id="child1">Content</div>

<br/>

<div id="head2">Click</div>
<div id="child2">Content</div>

<br/>

<div id="head3">Click</div>
<div id="child3">Content</div>

CSS

#head1{width: 400px; height: 40px; background: orange;}
#head2{width: 400px; height: 40px; background: red;}
#head3{width: 400px; height: 40px; background: purple;}

#child1{width: 300px; height: 700px; background: green; display: none;}
#child2{width: 300px; height: 700px; background: cyan; display: none;}
#child3{width: 300px; height: 700px; background: pink; display: none;}

JavaScript

$('#head1').click(function() {
  $('#child1').animate({
    opacity: 'toggle',
    height: 'toggle'
  },
  {
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'
    },
  }
  );
});

$('#head2').click(function() {
  $('#child2').animate({
    opacity: 'toggle',
    height: 'toggle'
  },
  {
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'
    },
  }
  );
});

$('#head3').click(function() {
  $('#child3').animate({
    opacity: 'toggle',
    height: 'toggle'
  },
  {
    duration: 750,
    specialEasing: {
      width: 'linear',
      height: 'easeInOutQuad'
    },
  }
  );
});

Answer 1

jquery scrollto トリックをする必要があります

編集

サンプルサイトを確認した後、私はそれを認識します jquery ui ardcian より良い選択肢かもしれません。

Answer 2

この機能は、JQuery Accordionを使用して痛むことができます

リンクを確認してください http://jqueryui.com/demos/accordion/