【jQuery】ページ遷移後に特定の要素の位置までスクロールする

Image

別ページのURLにアンカー(#testなど)をつけ、ページ遷移後に特定の位置までスクロールさせたいケースは多くあります。LP(ランディングページ)や1ページで構成された縦長のサイトなどなど。

基本的にはURLにアンカーをつければ指定した位置までスクロールするのですが、遷移後のページでサイズの大きい画像を読み込んでいたり、動的に高さを計算するスクリプトなどがあると、想定した位置とは違う場所でスクロールが止まってしまうことがあります。

あれ、ページ下部のお問い合わせフォームまでスクロールしたいのに、一つ上の商品紹介の途中で止まっちゃう…みたいな状況です。

制作者も意図していないし、ユーザにも優しくないし、コンバージョンを上げたいクライアントにとっても不都合ですよね。そういった場合は、ページ内の要素をすべて読み込んだ後にスクロールの処理を実行してあげると想定した位置に止まるようになるかもしれません。

ページを読み込んだ後にアンカーまでスクロールする

では実装していきましょう。

アンカー付きのURLからアクセスが合った場合に、ハッシュを取得します。ハッシュというのは下記の#以降の値になります。

URL

https://into-the-program.com/#sample

URLからアンカーを取得します。アンカーの取得にはlocationを利用します。locationはURLから様々な情報を取得することができます。locationから取得できる値については下記のページでご紹介していますので、よければご参照ください!

locationでURL情報を取得する

取得したアンカーの要素の位置をoffsetで取得し、でスクロールアニメーションを記述します。まとめると下記のようなスクリプトになります。window on loadを指定しているので、読み込み時に一度だけ実行されます。

JS

$(window).on('load',function(){
  var hash = $( location ).attr('hash');
  if(hash){
    var target = $(hash).offset().top;
    $('html,body').animate({scrollTop: target}, 'slow');
  }
});

slowの部分にはイージングを指定することができます。イージングは種類が多いですが、動きについては下記のページがとても参考になります。

Easing Function 早見表

以上、ページ遷移後に特定の要素の位置までスクロールする方法のご紹介でした!

SHARE