Webページの特定のスクロール位置へのハイパーリンクを作成することはできますか?たとえば、 http://www.stackoverflow.com/ へのリンクを作成しますが、ページを100ピクセル下にスクロールします。
jQuery scrollToプラグイン を使用して、特定の位置にスクロールできます。 デモページ を見ると、プラグインが特定の位置へのスクロールなど、さまざまなオプションに対応していることがわかります。ただし、ターゲットのJavaScriptを制御する必要があるため、外部サイトへのリンクには適さない場合があります。
ページ内のどこかへのバニラの方法のリンクは、ページにすでに存在する アンカーポイント を介しています。
これは、<a>…</a>
タグを使用して作成できます。 「アンカーポイント」(上記)で指定されたリンクの末尾に#h-12.2
があることに注意してください。これは、ページを形成するHTMLに埋め込まれた<a id="h-12.2">12.2</a>
に対応し、クリックすると、ページビューがこのアンカーに再配置されます。
HTML5より前は、name
属性はアンカータグで使用されていましたが、サポートされなくなったため、代わりにid
属性を使用する必要があります( 参照 )。これは、アンカータグに任意の要素を使用できることも意味します。<a>
要素に限定されません。
ページの要素を右クリックして検査してみてください。 <a>
タグが見つかります。これらはアンカーポイントです。
次に、最初と最後のa
の前に<
を取り出して、リンクとして表示されないようにします。以下のプレビューが表示されたら、応答ボックスに書き込んでいるときに実際に効果を確認できます。
a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>
そして
a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>
ご覧のように、唯一の違いは、アンカーがポンド記号(#
)の後に続く名前の最後にあります。 >
の後の名前は、リンクがユーザーに読み上げる方法を示します。
この場合、「question-header」は「question」と読み、答えは偶然同じです。
それから、以下は Mikeのコメント にリンクする必要があります。アンカーポイントは382094
であるため
明確にするには、アンカーを見つけてリンクの後に#
を追加するだけです。
https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header
https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers
https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#880079
これらはすべて、同じページの別の場所に移動します。
ページ上のピクセル固有の位置にリンクするには、「top:x left:y」座標を使用して絶対的に配置されたdiv内にアンカータグを配置します。
Citebite を使用して、Webページの特定の位置にIDを使用していなくても、その位置にリンクできます。使い方は簡単です。ここで指定したリンクに移動し、最初に表示するテキストのチャンクを[見積もりテキスト]フィールドに貼り付け、次に[ソースURL]テキストフィールドにそのWebページのリンクを入力します。次にクリックしてCitebiteを作成します。次に、リンクを生成します。そのリンクが希望のリンクになります。