jquery - CSS と jQuery を使用したサイド スクロール メニュー

Question

こちらのような横スクロールメニューを作りたいと思います。私が持っているもの：

HTML:

<div class="scroll">
<p class="scroll_item" id="1">&nbsp;</p>
<p class="scroll_item" id="2">&nbsp;</p>
<p class="scroll_item" id="3">&nbsp;</p>
<p class="scroll_item" id="4">&nbsp;</p>
</div>

<div id="first"> 1 </div>
<div id="second"> 2 </div>
<div id="third"> 3 </div>
<div id="fourth"> 4 </div>

CSS:

    .scroll{
        position:fixed;
        height:48%;
        right:4px;
        top:48%
    }


    .scroll_item{
        margin-bottom:10px;
        width:10px;
        height:10px;
        border: 3px solid #FFF;
    }
    .scroll_item_active{
        width:10px;
        height:10px;
        border:3px solid #FFF;
        background-color: #FFF;
        margin-bottom: 10px;
    }

これがどのように機能するか: <p>ID 3 の をクリックすると、ID「second」の div までスクロールし、ボックスにscroll_item_activeクラスが表示されます。一方、ブラウザのスクロールバーを使用すると、ボックスのクラスは変更されます。

jQuery スクリプトをコーディングするには、あなたの助けが必要です。私がやったこと：

$('#1').onclick(function(.scrollTo('#first');)
$('#2').onclick(function(.scrollTo('#second');)
$('#3').onclick(function(.scrollTo('#third');)
$('#4').onclick(function(.scrollTo('#fourth');)