クリックして指定の位置まで移動(ジャンプ・アンカーリンク)について【何度も戻るを押すのが面倒】

プログラミング

2019.06.10 2019.05.01

困ってる人

たまに何回も戻るボタンを押さないと、元来たページに戻れないサイトがある
１つのページ内を移動してるだけなのに、面倒だなぁ

こんにちは、ヨロと申します。

という事で今回は、１つのページ内にリンクを貼り、クリックしてその位置までページ内ジャンプで移動する機能(アンカーリンク)について。

クリックして指定の位置まで移動する機能(ジャンプ・アンカー・ページ内リンク)について、何度も戻るを押すのが面倒を解決
ページ内リンクを設定し、別の位置にページ内ジャンプする方法

クリックして指定の位置まで移動する機能(ジャンプ・アンカー・ページ内リンク)について、何度も戻るを押すのが面倒を解決

例えば、

「Yahoo!」の検索結果の１つの「あるサイト」に入ったとして、

そのページに「アンカーリンク」の機能が貼り付けられていたとします、

そして、そのサイト内のページ内リンクをクリックして、いろいろなコンテンツを見た後に、元々見ていた「Yahoo!」の検索結果のページに戻りたいといった場合に、

何度も何度も戻るボタンをクリックしないと、元来たページに戻れない、

そんなページってありますよね？

１つのページ内のコンテンツを移動して見てるだけなのに、何回も戻るボタンを押さないと、元来たページに戻れない。

それってすごく面倒だし、何なら元に戻れなくなって、元々何を検索していたのかも忘れてしまうパターン、

そんな時って、過去に１度や２度はあるはず、という事で今回は、

何回も戻るボタンを押さずに、元々見ていた検索結果のページに戻る方法。

これの解決方法というのが、ページ内リンクの履歴を残さない方法という事で、これらを「JavaScript」ファイルにコピペして使えばOK。

// ジャンプ＋スクロール

jQuery(function($) {

   $('a[href^=#]').click(function() { // #で始まるアンカーをクリックした場合に処理
      var speed = 400; //　スクロールの速度
      var href= $(this).attr("href"); // アンカーの値取得
      var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を取得
      var position = target.offset().top; // 移動先を数値で取得

      $('body,html').animate({scrollTop:position}, speed, 'swing'); // スムーススクロール
      return false;
   });
});

ページ内リンクを設定し、別の位置にページ内ジャンプする方法

ちなみに「ページ内リンク」の設定し、同じページ内の指定した位置まで飛ばす方法は、

飛ばしたい位置の要素に「id」をつけるだけ。例えばこんな感じ。

// ページ内リンクでその位置まで飛ばす方法

<a href="#top"></a>
<a href="#service"></a>
<a href="#access"></a> <!-- 例えばここをクリックしたら、下のid="access"まで飛ぶ -->


↓
↓
↓
↓
↓
↓
↓
↓


<div id="top"></div>



<div id="about"></div>



<div id="access"></div>

例えばこんな感じで、元々あるクラスに「id」を付与するのもOK

// ページ内リンクでその位置まで飛ばす方法

<a href="#〇〇"></a>

<div class="service" id="〇〇"></div>

これが出来れば今後、ヘッダー固定のランディングページ(LP)を作る時なんかにもとても便利なのでは？