ページネーションでページ選択後、該当部分までスクロールさせたい

Question

実現したいこと

• ワードプレスの表示設定でトップページに選んだ固定ページにて、ページネーションのページを選択後、該当部分まで自動scrollさせたい。または横スライドさせたい

わけがあって、front-page.phpなどのテンプレートファイルには書けません
該当サイト

どなたかお助け下さい。

前提

wordpressにてelementorを用いて、固定ページにショートコードを読み込ませて、（pagination.phpというファイルを読み込ませています）
カスタム投稿（スラッグ名bunny）のページネーションを表示させています。

問題1
ページネーションの番号2や3をクリックすると該当ページには遷移するのですがページの一番上までscrollが戻ってしまい、カスタム投稿一覧のところまで自動でスクロールされないので困っています

該当のソースコード

<?php
// フロントページにページネーションつける場合はget_query_var('paged')ではなくget_query_var('page')にする！！！
 $paged = (get_query_var('page')) ? get_query_var('page') : 1;
 $the_query = new WP_Query( array(
	 'post_type' => 'bunny',
     'post_status' => 'publish',
     'paged' => $paged,
     'posts_per_page' => 5, // 表示件数
     'orderby'     => 'date',
     'order' => 'DESC'
 ) );
  
//   コンテンツ
 if ($the_query->have_posts()) :?><?php
    while ($the_query->have_posts()) : $the_query->the_post();?>
<!-- ここまで自動スクロールさせたい -->
<div class="pagination_top">
	<div class="flex">
<section class="weekly2"><?php the_title(); ?><!--投稿タイトル--></section>
</div><!--flex-->
</div>

<?php endwhile;?><?php endif; ?>
<!-- pagenation -->

<div class="pagenation">
<?php 
if ($the_query->max_num_pages > 1) {
    echo paginate_links(array(
        'base' => get_pagenum_link(1) . '%_%',
        'format' => 'page/%#%/',
        'current' => max(1, $paged),
        'mid_size' => 1,
        'total' => $the_query->max_num_pages
    ));
}
wp_reset_postdata();?>
</div><!-- /pagenation -->

<!-- <script>
	
	jQuery(function(){

    setTimeout(function(){

       jQuery('.page-numbers').on('click',function(){
                const greenTop = jQuery('.pagination_top').offset().top;
                jQuery("html").animate({scrollTop: greenTop});
            });

    },5000);
});

       
    </script> -->

試したこと

setTimeout関数を使い、ページ番号クリックして数秒後にスクロールさせようと思いましたが、クリック→スクロールする→ページ遷移→上まで戻ってしまい意味がありません。
paginate_links関数の中にページネーション後に発動するイベントを指定したりするパラメータがあるかもしれないとも思い探しましたがありませんでした。

補足情報（FW/ツールのバージョンなど）

WordPress 6.2.2

Answer 1

Javascript はページごとに動作するものですから、ページ移動をした場合、setTimeoutも含めてすべての内容がリセットされます。
そのため、移動前ページから移動後ページに対して何かをすることはできません。

一番わかりやすい方法は、ページネーション部分にid属性を設定して、URLのフラグメントでそこに移動することを指定するやり方だと思います。
【HTML】ページ内リンクの作り方：記事の途中に飛ばすには？

Comments

[loving]

ご回答ありがとうございます！
ページネーションのページ番号を選択した場合のみ、ページ遷移後にidにページ内リンクする方法というものはphpではありますでしょうか？

[Lhankor_Mhy]

ページネーションのページ番号のリンクを、ページ内リンクにするのがいいと思います。

[loving]

ありがとうございます！！！
window.addEventListener('DOMContentLoaded', function(e){
Array.prototype.map.call(document.getElementsByClassName('page-numbers'),function(x){
x.href+="#pagenation"
});
});

として、クラス名page-numbersがついた箇所全てに、urlの最後に#pagenationへのページ内リンクを追加させやりたい動作が出来ました！！

[Lhankor_Mhy]

お役に立てたようで何よりです