Bagaimana saya bisa membuat tautan ke posisi tertentu di halaman web? [Tutup]

14

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.

html scrolling hyperlink Anderson Green
sumber
Saya berharap ada cara untuk menautkan ke posisi tertentu menggunakan piksel dalam URL.
akinuri

Jawaban:

3

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.

Amos M. Carpenter
sumber
14

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.

Paul
sumber
6

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 .

Mike Fitzpatrick
sumber
6

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.

Georgeq
sumber
Apakah ini hanya berfungsi untuk ID atau berfungsi juga untuk kelas? Misalnya, jika saya memiliki elemen, katakanlah, <h3 class = "theClass"> Header </h3>, bagaimana saya bisa menautkan ke elemen ini yang tidak memiliki nilai atribut ID?
Ulysses Alves
1

Untuk menautkan ke posisi spesifik piksel pada halaman, tempatkan tag jangkar di dalam div yang diposisikan sepenuhnya menggunakan koordinat "atas: x kiri: y".

Graeme
sumber
Saya menggunakan ini dalam membangun situs responsif di mana menu diperbaiki di bagian atas. Target normal menempatkan bagian atas posisi di belakang menu. Dengan menggunakan teknik di atas, mudah untuk membuat bagian atas yang diperlukan sejajar dengan bagian bawah menu.
Graeme
0

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.

Farabi Siddique
sumber
1
Selamat Datang di Pengguna Super! Silakan baca Cara merekomendasikan perangkat lunak untuk informasi minimum yang diperlukan dan saran tentang cara merekomendasikan perangkat lunak pada Pengguna Super. Agar jawaban Anda bermanfaat bahkan jika tautan yang disediakan memecah detail ini harus diedit ke dalam jawaban Anda.
Saya katakan Reinstate Monica
@Twisty Tautan yang disediakan ADALAH perangkat lunaknya. Ini adalah aplikasi web. Ini sepertinya cukup. Namun, Farabi, jika Anda memiliki afiliasi dengan Citebite, Anda harus mengungkapkannya. Kalau tidak, Anda baik-baik saja.
Duncan X Simpson
@DuncanXSimpson Silakan baca posting meta yang saya tautkan. Lebih dari sekadar nama perangkat lunak dan tautan diperlukan untuk memenuhi standar situs.
Saya katakan Reinstate Monica
@ Twisty 1. Selesai. 5. Oke, saya kira Anda bisa membuat kasus di sini. Farabi, Anda harus memberikan instruksi singkat tentang cara menggunakannya. 6. Tidak ada yang dipersonalisasi. Alat ini persis seperti yang dibutuhkan OP; tidak lebih, tidak kurang.
Duncan X Simpson
1
Tautan sudah mati :(
Aryan Firouzian