English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTMLページの内容が長い場合、ユーザーがそのページを閲覧する際に不便になることがあります。例えば、ページの最下部にスクロールした後にトップに戻りたい場合、スクロールバーを顶部にドラッグするか(またはページをリフレッシュするが、この方法の体験は良いものではありません)、効果が良い方法はアンカーを設定してこの問題を解決することです。ページ内またはページ間のジャンプを実現します。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>基本チュートリアル(oldtoolbag.com),アンカーセット</title></head><body> <a href="#bottom" name="top">ボトムにいく</a> <div style="height: 5000px; width: 300px; background-color: #123">ここでは、ページのヘッダーとボトムにジャンプする方法を説明します</div> <a href="#top" name="bottom">トップに戻る</a></body></html>テストを見て‹/›
(一)、ページ内ジャンプ設定方法一:
アンカーリンクを設定<a href="#miao">ニャン星人を見つける</a>;(注意:href属性の属性値の前に#を付けます)
ページ内の必要な場所にアンカーを設定<a name="miao"></a>;(注意:aタグにname属性を付けます。属性値は[1]内のhrefの属性値と同じで、#を付并ません。タグ中に必要に応じてテキストを入力しますが、通常は内容を書かないことが多いです。。
(二)、ページ内ジャンプ設定方法2:
アンカーリンクを設定<a href="#miao">ニャン星人を見つける</a>;(注意:href属性の属性値の前に#を付けます)
アンカーの場所を設定 <h4 id="miao">ニャン星人基地</h4>;移動先の位置のタグにid属性を追加します。属性値は①のhrefの属性値と同じで、#を付并ません。
注意:方法二では、アンカーを設定するために特別なaタグを追加する必要はありません。必要な場所のタグにidを追加するだけで良いです。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>アンカーダemonstration-基本チュートリアルoldtoolbag.com</title> </head> <body> <ul> <li><a href="#miao">ニャン星人を見つける</a></li> <li><a href="#wang">ワン星人を見つける</a></li> <li><a href="#meng">他の可愛いもの</a></li> </ul> <a name="miao"></a><!--アンカー設定方法1--> <h3 id="miao">ニャン星人基地</h3><!--アンカー設定方法2--> <p>ニャンニャン~</p> <p>ニャンニャン~</p> <p>ニャンニャン~</p> <p>ニャンニャン~</p> <p>ニャンニャン~</p> <p>ニャンニャン~</p> <a name="wang"></a> <p>ワンワン~</p> <p>ワンワン~</p> <p>ワンワン~</p> <p>ワンワン~</p> <p>ワンワン~</p> <p>ワンワン~</p> <a name="meng"></a> <p>可愛い可愛い~</p> <p>可愛い可愛い~</p> <p>可愛い可愛い~</p> <p>可愛い可愛い~</p> <p>可愛い可愛い~</p> <p>可愛い可愛い~</p> </body> </html>テストを見て‹/›