こんにちは、ikuxxと申します。
という事で今回は、１つのページ内にリンクを貼り、クリックしてその位置までページ内ジャンプで移動する機能(アンカーリンク)について。
クリックして指定の位置まで移動する機能(ジャンプ・アンカー・ページ内リンク)について、何度も戻るを押すのが面倒を解決
例えば、
「Yahoo!」の検索結果の１つの「あるサイト」に入ったとして、
そのページに「アンカーリンク」の機能が貼り付けられていたとします、
そして、そのサイト内のページ内リンクをクリックして、いろいろなコンテンツを見た後に、元々見ていた「Yahoo!」の検索結果のページに戻りたいといった場合に、
何度も何度も戻るボタンをクリックしないと、元来たページに戻れない、
そんなページってありますよね？
１つのページ内のコンテンツを移動して見てるだけなのに、何回も戻るボタンを押さないと、元来たページに戻れない。
それってすごく面倒だし、何なら元に戻れなくなって、元々何を検索していたのかも忘れてしまうパターン、
そんな時って、過去に１度や２度はあるはず、という事で今回は、
何回も戻るボタンを押さずに、元々見ていた検索結果のページに戻る方法。
これの解決方法というのが、ページ内リンクの履歴を残さない方法という事で、これらを「JavaScript」ファイルにコピペして使えばOK。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// ジャンプ＋スクロール 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」をつけるだけ。例えばこんな感じ。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// ページ内リンクでその位置まで飛ばす方法 <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
|
1 2 3 4 5 |
// ページ内リンクでその位置まで飛ばす方法 <a href="#〇〇"></a> <div class="service" id="〇〇"></div> |
これが出来れば今後、ヘッダー固定のランディングページ(LP)を作る時なんかにもとても便利なのでは？
プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール
海外約50ヶ国を放浪中
海外生活が長い事もあり、英語と韓国語をある程度話せます。
中国語に関しては、現在HSK4レベル
趣味は筋トレと海外旅行
FX＋いくつかのブログを運営中。
たまにWeb制作や写真のお仕事、過去には動画撮影のお仕事も
このWordPressテーマはゼロからの自作
なので、どこか変なところがあったら教えて下さい
最近はマレーシア住み
YouTubeも始めました
↓
たまに何回も戻るボタンを押さないと、元来たページに戻れないサイトがある
１つのページ内を移動してるだけなのに、面倒だなぁ