Menautkan ke bagian tertentu dari halaman web

Bagaimana cara membuat tautan ke bagian dari halaman web yang panjang di situs web lain yang tidak saya kontrol?

Saya pikir Anda dapat menggunakan varian dari #partofpage di akhir tautan saya. Ada saran?

Cukup tambahkan #diikuti dengan ID <a>tag (atau tag HTML lain, seperti a <section>) yang Anda coba masuki. Misalnya, jika Anda mencoba menautkan ke tajuk di HTML ini:

<p>This is some content.</p>
<h2><a id="target">Some Header</a></h2>
<p>This is some more content.</p>

Anda bisa menggunakan tautannya <a href="http://url.to.site/index.html#target">Link</a>.

Buat "tautan lompat" menggunakan format berikut:

http://www.somesite.com/somepage#anchor

Di mana jangkar adalah id dari elemen yang ingin Anda tautkan pada halaman itu. Gunakan alat pengembangan browser / lihat sumber untuk menemukan id elemen yang ingin Anda tautkan.

Jika elemen tidak memiliki id dan Anda tidak mengontrol situs itu maka Anda tidak dapat melakukannya.

Itu hanya mungkin jika situs tersebut telah menyatakan jangkar di halaman. Ini dilakukan dengan memberi tag nama atau atribut id , jadi cari yang dekat dengan tempat Anda ingin menautkan.

Dan kemudian sintaksnya adalah

<a href="page.html#anchor">text</a>

Jika halaman target berada di domain yang sama (yaitu berbagi asal yang sama dengan halaman Anda) dan Anda tidak keberatan membuat tab baru (1), Anda dapat (ab) menggunakan beberapa JavaScript :

<a href="javascript:void(window.open('./target.html').onload=function(){this.document.querySelector('p:nth-child(10)').scrollIntoView()})">see tenth paragraph on another page</a>

Trivia:

var w = window.open('some URL of the same origin');
w.onload = function(){
  // do whatever you want with `this.document`, like
  this.document.querySelecotor('footer').scrollIntoView()
}

Contoh kerja dari 'eksploitasi' yang dapat Anda coba sekarang adalah:

javascript:(function(url,sel,w,el){w=window.open(url);w.addEventListener('load',function(){w.setTimeout(function(){el=w.document.querySelector(sel);el.scrollIntoView();el.style.backgroundColor='red'},1000)})})('/programming/45014240/link-to-a-specific-spot-on-a-page-i-cant-edit','footer')

Jika Anda memasukkan ini ke bilah lokasi (ingat bahwa Chrome menghapus javascript:awalan saat ditempel dari papan klip) atau menjadikannya hrefnilai tautan apa pun di laman ini (menggunakan Alat Pengembang) dan mengekliknya, Anda akan mendapatkan laman pertanyaan SO (duplikat) lainnya yang digulir ke footer dan footer dicat merah. (Penundaan ditambahkan sebagai solusi untuk konten yang dimuat ajax yang mendorong footer ke bawah setelah dimuat.)

Catatan

• Diuji di Chrome dan Firefox saat ini, umumnya harus berfungsi karena didasarkan pada perilaku standar yang ditentukan.
• Tidak dapat diilustrasikan dalam potongan interaktif di SO, karena mereka diisolasi dari halaman asal-bijaksana.
• MDN: Window.open ()
• (1) window.open(url,'_self')tampaknya merusak loadacara; pada dasarnya membuat window.openperilaku seperti a href=""navigasi klik biasa ; belum meneliti lebih lanjut.

First off target mengacu pada BlockID yang ada di kode HTML atau alat pengembang chromes yang Anda coba tautkan. Setiap kode berbeda dan Anda perlu melakukan penggalian untuk menemukan ID yang Anda coba rujuk. Seharusnya terlihat seperti div class="page-container drawer-page-content" id"PageContainer"Perhatikan bahwa ini adalah format untuk seluruh bagian yang direferensikan, bukan teks atau gambar individual. Untuk melakukan itu, Anda perlu menemukan potongan kode yang sama tetapi berkaitan dengan blok target Anda. Misalnya, dv id="your-block-id"saya baru saja membaca utas ini dan sebuah ide muncul di benak saya, jika Anda adalah pengguna Shopify dan ingin melakukan ini, itu hampir sama dengan yang dinyatakan. Tapi bukannya

> http://url.to.site/index.html#target

Anda akan menempatkan

> http://storedomain.com/target

Misalnya, saya menyiapkan halaman pelepasan tanggung jawab hukum dengan tautan yang mengarah ke pendaftaran buletin dan blok belanja di halaman beranda saya, jadi saya memasukkan https://mystore-classifier.com/#shopify-section-1528945200235hyperlink saya. Harap perhatikan bahwa -classifier adalah untuk penggunaan internal saya dan tidak berlaku untuk Anda. Ini hanya agar saya dapat melacak toko saya. Jika Anda ingin menautkan ke sesuatu selain beranda, Anda akan meletakkannya

> http://mystore-classifier.com/pagename/#BlockID

Saya harap seseorang menemukan ini berguna, jika ada yang salah dengan penjelasan saya, beri tahu saya karena saya bukan programmer HTML, bahasa saya adalah C #!

Fitur Chrome "Gulir ke teks" yang akan datang persis seperti yang Anda cari ....

https://github.com/bokand/ScrollToTextFragment

Anda pada dasarnya menambahkan #targetText=di akhir URL dan browser akan menggulir ke teks target dan menyorotnya setelah halaman dimuat.

Ini ada dalam versi Chrome yang berjalan di meja saya, tetapi saat ini harus diaktifkan secara manual. Agaknya itu akan segera diaktifkan secara default dalam produksi Chrome build dan browser lain akan mengikuti, jadi OK untuk mulai menambahkan tautan Anda sekarang dan itu akan mulai berfungsi kemudian.