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


14

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


URLのピクセルを使用して特定の位置にリンクする方法があればいいのにと思います。
アキヌリ

回答:


3

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


14

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

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

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


6

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

たとえば、このページの質問または回答へのリンク/スクロール。


6

ページ上で右クリックして要素を調べてみてください。<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

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


これはIDに対してのみ機能しますか、それともクラスに対しても機能しますか?たとえば、<h3 class = "theClass"> Header </ h3>などの要素があった場合、ID属性値を持たないこの要素にリンクするにはどうすればよいですか?
ユリシーズAlves

1

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


私はこれを、メニューが上部に沿って修正されたレスポンシブサイトの構築に使用しました。通常のターゲットは、メニューの後ろに配置されたセクションの上部に配置されました。上記の手法を使用すると、必要なセクションの上部をメニューの下部と簡単に並べることができました。
グレアム

0

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


1
スーパーユーザーへようこそ!お読みくださいソフトウェアをお勧めする方法のために最低限必要な情報や、スーパーユーザーにソフトウェアをお勧めする方法についての提案。提供されたリンクが壊れている場合でも答えを有用に保つには、これらの詳細を回答に編集する必要があります。
私は言う

@Twisty提供されたリンクはソフトウェアです。これはWebアプリです。これで十分のようです。ただし、ファラビ、Citebiteと提携している場合は、それを開示する必要があります。そうでなければ、あなたは良いです。
ダンカンXシンプソン

@DuncanXSimpsonリンクしたメタ投稿を読んでください。サイトの標準を満たすためには、ソフトウェアの名前とリンクだけでは不十分です。
私は言う:モニカを復活させる

@Twisty 1.完了。5.さて、ここで主張することができると思います。ファラビ、あなたはそれを使用する方法について簡単な指示を与える必要があります。6.パーソナライズされたものはありません。このツールは、OPがまさに必要としていたものです。これ以上でもそれ以下でもありません。
ダンカンXシンプソン

1
リンクは死んでいます:(
アーリアンフィロジア
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.