【javascript】jQueryで別ページからリンク先のアコーディオンメニューを開く方法

###前提・実現したいこと
このサイトのようなことを実装したいと思い、
HTMLやjavascriptを用いて実装を行いました。
ページAにlistを並べ、それぞれ#aaa,#bbb,#cccのアンカーを設定しました。
ページAのlistが押されるとページBのアコーディオンメニューが開かれるようになっています。
別ページからアコーディオンメニューが開かれたときに表示位置はwindowのトップ位置になっているのですが、少し下にずらして表示をさせたく思っております。
下記にソースコードを記載しておりますので、ご助力をいただければと思います。

###発生している問題・エラーメッセージ
javascriptの知識が浅く、scrollTopを用いればできるのではないかと思っているのですが、動作がうまくいかず、表示位置もwindowのトップ位置のままとなっております。
トップから80px程下にずらしたいため
$('html,body').scrollTop($(location.hash).offset().top) - 80;をjavascriptに記入しておりますが、動作しておりません。

###該当のソースコード
↓ページA

html
1<div id="listarray">
2    <ul id="listbox">
3		<li><a href="B.html#aaa"><img src="/images/aaa.jpg"></a></li>
4		<li><a href="B.html#bbb"><img src="/images/bbb.jpg"></a></li>
5		<li><a href="B.html#ccc"><img src="/images/ccc.jpg"></a></li>
6	</ul>
7</div>

↓ページB

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<script src="js/jquery.js"></script>
6<script>	
7$(function(){
8    // 別ページから開閉パネルを開く
9    $(location.hash).children('.subInner').slideToggle();
10    $('html,body').scrollTop($(location.hash).offset().top) - 80;
11
12  // アコーディオンの表示位置をwindowのトップから80px下にずらしたい
13    $(location.hash).find('h4 span').toggleClass('open');
14
15    // #で始まるアンカーをクリックした場合に処理
16    $('.menu a[href^=#]').on('click', function() {
17        // スムーススクロール
18        var speed = 400;// ミリ秒
19        var href= $(this).attr("href");
20        var target = $(href == "#" || href == "" ? 'html' : href);
21        var position = target.offset().top - 80;
22        $('body,html').animate({scrollTop:position}, speed, 'swing');
23        // 開閉パネルが閉じていたら
24        if($(href).children('.subInner').css('display') == 'none'){
25            // 同時に開閉イベントを実行
26            $(href).children('h4').trigger('click');
27        }
28        return false;
29    });
30});
31</script>
32<style>
33.wrap {
34    width:800px;
35    margin:0 auto;
36}
37
38.menu {
39    margin:0;
40    padding:0;
41}
42
43.menu li {
44    float:left;
45    margin-right:10px;
46    list-style:none;
47}
48
49.menu li a {
50    display:block;
51    padding:10px 20px;
52    color:#fff;
53    background:#000;
54    cursor:pointer;
55}
56
57.subInner {
58    display:none;
59    padding:10px;
60    background:#f19c75;
61}
62
63.subContent h4 {
64    margin:10px 0;
65    padding:10px;
66    line-height:20px;
67    color:#fff;
68    background:#000;
69    cursor:pointer;
70}
71
72.subContent h4 span {
73    display: block;
74    background:url('images/arrow.png') 100% 0% no-repeat;
75}
76
77.subContent h4 span.open {
78    background:url('images/arrow.png') 100% 100% no-repeat;
79}
80</style>
81<title>HTML5サンプル</title>
82</head>
83<body>
84<div class="wrap">
85    <ul class="menu">
86        <li><a href="#sub01">ボタン1</a></li>
87        <li><a href="#sub02">ボタン2</a></li>
88        <li><a href="#sub03">ボタン3</a></li>
89        <li><a href="#sub04">ボタン4</a></li>
90    </ul>
91
92    <br>・・・
93
94    <div id="aaa" class="subContent">
95        <h4><span>項目1</span></h4>
96        <div class="subInner">
97            内容内容内容<br><br><br><br><br><br><br>
98        </div><!-- /.subInner -->
99    </div><!-- /.subContent -->
100
101    <div id="bbb" class="subContent">
102        <h4><span>項目2</span></h4>
103        <div class="subInner">
104            内容内容内容<br><br><br><br><br><br><br>
105        </div><!-- /.subInner -->
106    </div><!-- /.subContent -->
107
108    <div id="ccc" class="subContent">
109        <h4><span>項目3</span></h4>
110        <div class="subInner">
111            内容内容内容<br><br><br><br><br><br><br>
112        </div><!-- /.subInner -->
113    </div><!-- /.subContent -->
114</div><!-- /.wrap -->
115</body>
116</html>