javascriptで実装したページ内リンクが、2回目以降のクリックで動作しない場合の解決方法

プレーンなhtmlのウェブサイトにて
40件程度の旅館のリストを
以下のように作成しました。

html

<h2 id="list-title">ホテルのリスト</h2><ul class="hotellist"> <li class="hotel">◯◯◯◯◯◯◯◯◯◯◯◯</li> <li class="hotel">◯◯◯◯◯◯◯◯◯◯◯◯</li> <li class="hotel">◯◯◯◯◯◯◯◯◯◯◯◯</li> ・ ・ ・ <li class="hotel">◯◯◯◯◯◯◯◯◯◯◯◯</li> <li class="hotel">◯◯◯◯◯◯◯◯◯◯◯◯</li> <li class="hotel">◯◯◯◯◯◯◯◯◯◯◯◯</li></ul>

これを10件ずつ表示できるよう
paginathing.js
https://github.com/alfrcr/paginathing
を以下のように適用し
ページネーションを設置し分割表示しました。

javascript

<script src="js/paginathing.min.js"></script><script>$(function() { $('.hotellist').paginathing({ perPage: 10, prevText:'前へ', nextText:'次へ', activeClass: 'navi-active', })});</script>

ページネーション部分は
次のようなコードで
先のリストの直後に出力されました。

html

<nav class="pagination-container"> <ul class="pagination"> <li class="first disabled"><a href="#">First</a></li> <li class="prev disabled"><a href="#">前へ</a></li> <li class="page navi-active"><a href="#">1</a></li> <li class="page"><a href="#">2</a></li> <li class="page"><a href="#">3</a></li> <li class="page"><a href="#">4</a></li> <li class="next"><a href="#">次へ</a></li> <li class="last"><a href="#">Last</a></li> </ul></nav>

次に
ページネーションのリンクをクリックすると
リストの先頭に移動するよう
次のjavascriptをpaginathing.js設定の直後に追加しました。

javascript

<script> $(function () { $('.pagination a').on('click',function(){ const goTop = $('#list-title').offset().top; $("html").animate({scrollTop: goTop}); }); });</script>

すると
ページネーション内の任意のリンクをクリックした際
1回目は正常に、id="list-title"の箇所にスクロールしますが
2回目以降は、
ページネーション内のいずれのリンクをクリックしても
ページ内リンクが動作しませんでした。

なお
paginathing.jsを編集し
ページネーションのaタグ内を
href="#list-title"に変更しても同様でした。

この場合の解決方法を
教えていただけますでしょうか。