タブ切り替えの際にスムーススクロールしたい

前提・実現したいこと

CSSで作成をした、タブ切り替えで
タブを押した後に「タブが切り替わる」→「切り替わったコンテンツまでスムーススクロール」する様に実装をしたいです。
タブは2つあります。

該当のソースコード

html
1<div class="tab01">
2    <ul>
3        <li><label for="all">総合</label></li>
4        <li><label for="programming">プログラミング</label></li>
5        <li><label for="design">デザイン</label></li>
6    </ul>
7</div>
8
9<div class="tab02">
10  <input id="all" type="radio" name="tab_item" checked>
11  <label class="tab_item" for="all">総合</label>
12  <input id="programming" type="radio" name="tab_item">
13  <label class="tab_item" for="programming">プログラミング</label>
14  <input id="design" type="radio" name="tab_item">
15  <label class="tab_item" for="design">デザイン</label>
16  <div class="tab_content" id="all_content">
17    <div class="tab_content_description">
18      <p class="c-txtsp">総合の内容がここに入ります</p>
19    </div>
20  </div>
21  <div class="tab_content" id="programming_content">
22    <div class="tab_content_description">
23      <p class="c-txtsp">プログラミングの内容がここに入ります</p>
24    </div>
25  </div>
26  <div class="tab_content" id="design_content">
27    <div class="tab_content_description">
28      <p class="c-txtsp">デザインの内容がここに入ります</p>
29    </div>
30  </div>
31</div>

script.js
1$(function () {
2    if (window.location.hash === "#all") {
3        $('#all').prop('checked', true);
4        $('html,body').animate({
5            scrollTop: $('#all_content').offset().top
6        }, 'fast');
7    }
8});
9$(function () {
10    if (window.location.hash === "#programming") {
11        $('#programming').prop('checked', true);
12        $('html,body').animate({
13            scrollTop: $('#programming_content').offset().top
14        }, 'fast');
15    }
16});
17$(function () {
18    if (window.location.hash === "#design") {
19        $('#design').prop('checked', true);
20        $('html,body').animate({
21            scrollTop: $('#design_content').offset().top
22        }, 'fast');
23    }
24});