0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Livewire不要 Laravelページネーション後の自動スクロール

Last updated at Posted at 2022-04-15

何をしたいか

ページネーション後にリロードされて一番上に行くのではなく
ページネーション後はある要素まで自動でスクロールしたい時があります。
amazonのレビューみたいな感じで。

LaravelであればLivewireを使用してページネーションを作成すれば良いですが
Laravelのバージョンが古いと使えないのかな?

まぁ、jQueryでサクッと実装できるのでコピペして使ってください。
なので別にLaravelとか関係ないです。

Scroll.js
$(function(){

  //URLパラメータ取得
  function getParam(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}
//上記記述で例えば https://hoge.com?page=2 と言うURLならgetParam('page')で「2」が取得できる

//もしページネーション中なら指定したidの要素までスクロール
if(getParam('page')){
  var target = $('#js-review').offset().top;
  $('html,body').animate({scrollTop: target}, 'slow');
//スクロールスピードはご自由に!!
}


});

ベリーイージー(^^♪

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?