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