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

こんにちは、Ryohei（@ityryohei）です！

別ページの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 早見表

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

この記事を書いた人

Ryohei

Webエンジニア / ブロガー

福岡のWeb制作会社に務めるWebエンジニアです。エンジニア歴は10年程で、好きな言語はPHPとJavaScriptです。本サイトは私がインプットしたWebに関する知識を整理し、共有することを目的に2015年から運営しています。Webに関するご相談があれば気軽にお問い合わせください。

お問い合わせはこちら

Follow @itpryohei