Apakah mungkin membuat hyperlink ke posisi gulir tertentu pada halaman web? Misalnya, saya ingin membuat tautan ke http://www.stackoverflow.com/ , tetapi dengan halaman tersebut digulir ke bawah 100 piksel.
Jawaban:
Anda dapat menggulir ke posisi yang diberikan menggunakan plugin jQuery scrollTo . Jika Anda melihat halaman demo -nya , Anda akan melihat bahwa plugin ini mampu melakukan banyak opsi berbeda, termasuk menggulir ke posisi tertentu. Itu berarti Anda harus mengontrol JavaScript target, jadi ini mungkin tidak cocok untuk tautan ke situs eksternal.
Tautan cara vanila ke suatu tempat di halaman adalah melalui titik jangkar yang sudah ada di halaman.
Ini dapat dibuat menggunakan <a>…</a>tag. Perhatikan bahwa tautan yang ditentukan dalam "titik jangkar" (di atas) ada #h-12.2di akhir. Ini sesuai dengan <a id="h-12.2">12.2</a>tertanam dalam HTML yang membentuk halaman, dan ketika diklik akan memposisikan tampilan halaman ke jangkar ini.
Perhatikan bahwa sebelum HTML5, nameatribut digunakan di tag jangkar, tetapi tidak lagi didukung dan idatribut tersebut harus digunakan di tempatnya ( referensi ). Ini juga berarti bahwa Anda dapat menggunakan elemen apa pun untuk tag anchor, Anda tidak terbatas pada <a>elemen.
Mirip dengan jawaban Paul, Anda juga dapat menautkan ke kemunculan pertama tag ID dalam dokumen HTML. Ini tidak akan menjadi jumlah piksel yang tepat.
Misalnya, tautkan / gulir ke pertanyaan atau jawaban halaman ini .
Coba klik kanan dan Memeriksa Elemen pada halaman. Anda akan menemukan <a>tag, itu adalah titik jangkar.
Kemudian ambil <yang pertama dan terakhir asehingga mereka tidak akan muncul sebagai tautan. Anda benar-benar dapat melihat efek saat menulis di kotak respons ketika itu menunjukkan preview di bawah ini.
a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>
dan
a href="/superuser/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>
Seperti yang Anda lihat, satu-satunya perbedaan adalah di bagian paling akhir di mana jangkar menamai #simbol pound ( ). nama setelah >adalah untuk bagaimana tautan membaca ke pengguna.
Dalam hal ini "header pertanyaan" dibaca sebagai "pertanyaan" dan jawabannya sama.
Maka yang berikut ini harus terhubung dengan komentar Mike . Karena titik jangkar mereka adalah382094
Untuk memperjelas, Anda cukup menemukan jangkar dan menambahkan tautan #setelah Anda.
/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
ini semua akan membawa Anda ke tempat yang berbeda di halaman yang sama.
Untuk menautkan ke posisi spesifik piksel pada halaman, tempatkan tag jangkar di dalam div yang diposisikan sepenuhnya menggunakan koordinat "atas: x kiri: y".
Anda dapat menggunakan Citebite untuk menautkan ke posisi tertentu dari suatu halaman web bahkan jika itu tidak menggunakan id pada posisi itu. Mudah digunakan. Cukup buka tautan yang saya berikan di sini dan kemudian tempel potongan teks yang ingin Anda tampilkan pertama setelah pergi ke halaman web Anda di bidang teks Penawaran dan kemudian berikan tautan halaman web di bidang teks URL Sumber. Kemudian klik untuk Membuat Citebite. Maka itu akan menghasilkan tautan. Tautan itu akan menjadi tautan yang Anda inginkan.