Scrollify.js を使ったページにアンカーリンク遷移できません

実現したいこと

質問させてください。現在Scrollify.jsというプラグインを使ってページを作成しているのですが、別ページからScrollify.jsを使用したページ内の指定ID位置に移動させることができず困っております。
Scrollify公式サイト → https://projects.lukehaas.me/scrollify/#home

以下のようにトップページ（index.html）に Scrollify.js を設置しました。アクセスの位置にはid="access"というふうにアンカーを設置しています。

html
1<!-- index.html -->
2<div class="section">
3section1
4</div>
5
6<div class="section">
7section2
8<a href="detail.html">詳細ページへ</a>
9</div>
10
11<div id="access" class="section">
12アクセス
13</div>
14
15<div class="section">
16section4
17</div>
18
19<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
20<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js"></script>
21<script>
22$(function() {
23  $.scrollify({
24    section : ".section",
25  });
26});
27</script>

css
1.section {
2  background-color: #fcc;
3}
4.section + .section {
5  margin-top: 100px;
6}

次に詳細ページ（detail.html）からトップページ内のアクセスの位置に移動させたいのでindex.html#accessというリンクを配置しました。

html
1<!-- detail.html -->
2<a class="btn" href="index.html#access">TOPアクセスへ</a>

しかしリンクをクリックするとトップページには遷移するのですが、アクセスの位置に移動せずURLもindex.html#accessとはならず（一瞬だけアドレスバーに表示されます）、index.html#1に変わってしまいます。

試したこと

scrollify が原因でアンカーリンクが機能しないのかと思い、こちらを参考にして以下のように scrollify を無効にしようとしたのですが上手くいきませんでした。

html
1<!-- detail.html -->
2<a class="btn" href="index.html#access">TOPアクセスへ</a>
3
4<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
5<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.21/jquery.scrollify.min.js"></script>
6
7<script>
8$('.btn').on('click', function(event) {
9  if ($(this).toggleClass('scrollifyoff').hasClass('scrollifyoff')) {
10    $.scrollify.disable();
11  } else {
12    $.scrollify.enable();
13  }
14});
15</script>