web-dev-qa-db-ja.com

Webページの特定の位置へのリンクを作成するにはどうすればよいですか?

Webページの特定のスクロール位置へのハイパーリンクを作成することはできますか?たとえば、 http://www.stackoverflow.com/ へのリンクを作成しますが、ページを100ピクセル下にスクロールします。

15
Anderson Green

jQuery scrollToプラグイン を使用して、特定の位置にスクロールできます。 デモページ を見ると、プラグインが特定の位置へのスクロールなど、さまざまなオプションに対応していることがわかります。ただし、ターゲットのJavaScriptを制御する必要があるため、外部サイトへのリンクには適さない場合があります。

3

ページ内のどこかへのバニラの方法のリンクは、ページにすでに存在する アンカーポイント を介しています。

これは、<a>…</a>タグを使用して作成できます。 「アンカーポイント」(上記)で指定されたリンクの末尾に#h-12.2があることに注意してください。これは、ページを形成するHTMLに埋め込まれた<a id="h-12.2">12.2</a>に対応し、クリックすると、ページビューがこのアンカーに再配置されます。

HTML5より前は、name属性はアンカータグで使用されていましたが、サポートされなくなったため、代わりにid属性を使用する必要があります( 参照 )。これは、アンカータグに任意の要素を使用できることも意味します。<a>要素に限定されません。

15
Paul

Paulの回答と同様に、HTMLドキュメント内のタグIDの最初の出現にリンクすることもできます。ただし、これは正確なピクセル数ではありません。

たとえば、このページの question または answers にリンク/スクロールします。

7

ページの要素を右クリックして検査してみてください。 <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

これらはすべて、同じページの別の場所に移動します。

6
Georgeq

ページ上のピクセル固有の位置にリンクするには、「top:x left:y」座標を使用して絶対的に配置されたdiv内にアンカータグを配置します。

1
Graeme

Citebite を使用して、Webページの特定の位置にIDを使用していなくても、その位置にリンクできます。使い方は簡単です。ここで指定したリンクに移動し、最初に表示するテキストのチャンクを[見積もりテキスト]フィールドに貼り付け、次に[ソースURL]テキストフィールドにそのWebページのリンクを入力します。次にクリックしてCitebiteを作成します。次に、リンクを生成します。そのリンクが希望のリンクになります。

0
Farabi Siddique