Bir sayfanın bir kısmına nasıl bağlantı verebilirim? (Hash?)

210

<a>Tarayıcının üst kısımdan farklı olarak hedef sayfadaki belirli alt başlıklara gitmesi için nasıl bağlantı kurarsınız?

html xhtml anchor

— Haroldo
kaynak

275

Bir <a name="foo">etiket veya id(örn. <div id="foo">) İçeren herhangi bir etiket varsa #foo, URL'ye ekleyebilirsiniz . Aksi takdirde, bir sayfanın bölümlerine isteğe bağlı olarak bağlantı veremezsiniz.

İşte tam bir örnek: <a href="http://example.com/page.html#foo">Jump to #foo on page.html</a>

Aynı sayfadaki içeriği bağlama örneği: <a href="#foo">Jump to #foo on same page</a>

— Daniel DiPaolo
kaynak

60

Yalnızca bir not: HTML5'te artık name-elements için- niteliği yoktur <a>: Öğedeki ad özniteliği geçersizdir. Bunun yerine en yakın kapsayıcıya bir id niteliği koymayı düşünün.

— insertusernameburada

tam örneği mi yoksa aynı sayfa örneğini mi kullanıyorsunuz? tam örnek aynı şey değil mi?

— akantoword

2

url gibi huzurlu bir sayfamız olsaydı: domain.com/#home?page=1href'de id nasıl kullanılır?

— iraj jelodari

1

@irajjelodari Karma sonuna domain.com/?page=1#home

— koyardınız

i gibi url 2 Hashtag'leri kullanmak zorunda kaldı: example.com/#RouteName?page=1#ID. biri yönlendirme için ve diğeri geçerli sayfanın içinde gezinme için. nihayet rota hashtag'leri kaldırmak için URL'nin html5 modunu kullandım;) @tomsmeding

— iraj jelodari

41

Bir çapa ve bir karma kullanırsınız. Örneğin:

Bağlantının Hedefi:

 <a name="name_of_target">Content</a>

Hedefe Bağlantı:

 <a href="#name_of_target">Link Text</a>

Veya farklı bir sayfadan bağlantı yapıyorsanız:

 <a href="http://path/to/page/#name_of_target">Link Text</a>

— Michael Aaron Safyan
kaynak

8

Broser ayrıca kimliğine sahip herhangi bir öğeye atlar name_of_target. <a>Hedef olarak bir etiket kullanmanıza gerek yoktur . Yani başka bir hedef olabilir <h3 id='name_of_target'>Content</h3>.

— Cyrille

8

Bunun artık HTML5'te kullanılmadığını unutmayın.

— Tim

33

URL'ye bir öğe kimliğine sahip bir karma ekleyin. Örneğin

<div id="about"></div>

ve

http://mysite.com/#about

Yani bağlantı şöyle görünecektir:

<a href="http://mysite.com/#about">About</a>

ya da sadece

<a href="#about">About</a>

— Felix Kling
kaynak

21

İşte böyle:

<a href="#go_middle">Go Middle</a>

<div id="go_middle">Hello There</div>

— Sarfraz
kaynak

2

Sen ne? </a>Bir açılıştan sonra kapanışınız var <div ...>- burada ne yapmaya çalıştığınızdan emin değilsiniz.

— Dominic Rodger

1

Bağlantı hattımı kopyaladım ve aşağıya yapıştırdım ve div'i kapatmayı unuttum. Yine de teşekkürler.

— Sarfraz

10

İki seçeneğiniz var:

Belgenize aşağıdaki şekilde bir çapa koyabilirsiniz:

<a name="ref"></a>

Veya herhangi bir HTML öğesine bir kimlik verirsiniz:

<h1 id="ref">Heading</h1>

Ardından #refistenen referansa atlamak için hash'ı bağlantınızın URL'sine ekleyin . Misal:

<a href="document.html#ref">Jump to ref in document.html</a>

— Daniel Vassallo
kaynak

6

12 Mart 2020'de, Metin Parçaları için WICG tarafından bir taslak eklenmiştir ve artık bir sayfadaki metne hash'e aşağıdakileri ekleyerek arıyormuş gibi bağlayabilirsiniz.

#:~:text=<Text To Link to>

Çalışma örneği Chrome Version 81.0.4044.138:

Bu bağlantıyı tıklayın Sayfayı yeniden yüklemeli ve bağlantının metnini vurgulamalıdır

— Abderrahmane TAHRI JOUTI
kaynak