[CakePHP]Paginatorでページジャンプにアンカー指定

Paginatorのページジャンプで検索一覧の先頭（アンカー）を表示する

サイトの検索一覧画面にて、検索一覧エリアの上部にコンテンツや説明があると、ページジャンプ後一覧までスクロールする必要があるため、Paginatorのページジャンプ遷移後に、検索一覧の先頭を表示させる方法。

Paginatorのテンプレートにアンカーを記述することで、ページジャンプ後指定したアンカーが表示される。

検索一覧の先頭にアンカー設置

Aタグでも良いし

  <a name="search_list" /> <!-- これ！ -->
  <div class="search-list-box">
    <h2 class="section-title">検索一覧</h2>

ID属性でも良い

  <div class="search-list-box" id="search_list"> <!-- ID属性　これ！ -->
    <h2 class="section-title">検索一覧</h2>

これで

http://xxx.co.jp/Home/index#search_list で遷移出来る

Paginatorのテンプレートにアンカーを記述

config\paginator-templates.php　なければ作る

<?php
return [
	'first' => '<span class="pager-jump"><a href="{{url}}#search_list" class="pager-buttom"><i class="fas fa-fast-backward"></i></a></span>',
	'last' => '<span class="pager-jump"><a href="{{url}}#search_list" class="pager-buttom"><i class="fas fa-fast-forward"></i></a></span>',
	'nextActive' => '<span class="pager-jump"><a href="{{url}}#search_list" class="pager-buttom">＞</a></span>',
	'nextDisabled' => '<span class="pager-jump">＞</span>',
	'prevActive' => '<span class="pager-jump"><a href="{{url}}#search_list" class="pager-buttom">＜</a>',
	'prevDisabled' => '<span class="pager-jump">＜</span>',
	'number' => '<span class="pager-number"><a href="{{url}}#search_list">{{text}}</a></span>',
	'current' => '<span class="pager-number current">{{text}}</span>',
];

a タグの{{url}}の後ろに#search_list　を付加

Paginatorにテンプレートを指定　コントローラーで

  public $helpers = [
    'Paginator' => ['templates' => 'paginator-templates'],
  ];

ページジャンプのリンクが

http://xxx.co.jp/Home/index?page=2#search_list

Paginatorのテンプレート

Paginatorのテンプレート作成・指定は

参考

Paginator