■ページ内リンクで指定

 ①出発点

  aタグで、href属性の値に「#id名」記載

 ②到達点

  到達点にする要素にid名を指定

 

出発点 <a href=”#jump”>

到達点 <h2 id="jump">scroll_one</h2> 

■別のページの特定の場所にジャンプ

 ①出発点

   aタグで、href属性の値に「指定したURL」+「#id名」記載

 ②到達点

  別ページ内の到達点にする要素にid名を指定  

 

出発点<a href="jump.html#high_jump">

到達点<h2 id="high_jump">ここに飛ぶ</h2>

 

 出発点のaタグのhref属性の値の後ろに

 半角スペース+target=”_blank”を追記すると別タブで飛ぶ

 

出発点<a href="jump.html#high_jump"_blank">
到達点<h2 id="high_jump"">タブ開いてここに飛ぶ</h2>

 

さらにrel="noopener noreferrer"rel=”noreferrer”をつけることもある

 

例)noopener noreferrer
出発点<a href="jump.html#high_jump"_blank" rel="noopener noreferrer">
到達点<h2 id="high_jump"">タブ開いてここに飛ぶ</h2>

 

■noopener noreferrer と noreferrer の意味

①noopener

新しいタブで開く場合に効果を発揮

(noopener自体には新しいタブで開く効力はない)

・操作制御

元タブと新しいタブで別スレッドになるので、新しいタブから元タブへの操作を制御できる

noopenerを付けないと、JavaScriptでwindow.openerというオブジェクトが操作できるようになり、新しいタブで開いたページから元タブのページの操作が可能となる(このあたりはよくわからない。Javaしたらまたわかるかな)

パフォーマンス観点

元タブと新しいタブで別スレッドになるので、ページの処理も別々になる。
例えば新しいタブで開いたページが重くても、元タブのページへの影響を抑えることができる

②noreferrer

参照先に対して参照元のリンクを渡さないようにすることができる
(電話で例えると非通知電話みたいなもの)

参照元リンク情報を渡さないことで、渡したくない情報(ユーザーIDなど)がURLリンクに含まれていても大丈夫になる

 

おまけ※タブを開いて同じ画面が開く

<a class="link" href="#" target="_blank" rel="noopener noreferrer">タブを開いて同じ画面が開く</a>

鉛筆参考資料

まろりかの自由帳

 

 

    

23/5/28追記

 

<a href="#">

現在のページ内の先頭に戻るリンクを作成