Saya punya pertanyaan yang akan sangat sering ditemukan. Masalahnya adalah bahwa tidak ada solusi eksplisit yang dapat ditemukan.
Saya memiliki dua masalah terkait jangkar.
Tujuan utamanya adalah untuk mendapatkan url bersih yang bagus tanpa hash di dalamnya saat menggunakan jangkar untuk melompat pada halaman.
Jadi struktur jangkar adalah:
<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
</ul>
<div class="wrap">
<a name="one">text 1</a>
<a name="two">text 2</a>
<a name="three" class="box">text 3</a>
</div>
Oke, jika Anda mengklik salah satu tautan, url akan otomatis berubah
www.domain.com/page#1
Pada akhirnya ini seharusnya hanya:
www.domain.com/page
Sejauh ini baik. Sekarang yang kedua adalah, ketika Anda mencari di internet untuk masalah itu Anda akan menemukan javascript
solusi.
Saya telah menemukan fungsi ini:
function jumpto(anchor){
window.location.href = "#"+anchor;
}
dan memanggil fungsi itu dengan:
<a onclick="jumpto('one');">One</a>
apa yang akan sama seperti sebelumnya. Ini akan menambahkan hash ke url. Saya juga menambahkan
<a onclick="jumpto('one'); return false;">
tanpa keberhasilan. Jadi jika ada seseorang yang bisa memberi tahu saya cara mengatasi ini, saya akan sangat menghargai.
Terima kasih banyak.
window.location.hash=''
.window.scrollTo
atau pembantu jQuery yang sesuai: stackoverflow.com/questions/6677035/jquery-scroll-to-element atau stackoverflow.com/questions/500336/…location.hash=''
,#
tetap ada di sana.Jawaban:
Anda bisa mendapatkan koordinat elemen target dan mengatur posisi gulir padanya. Tapi ini sangat rumit.
Inilah cara yang lebih malas untuk melakukan itu:
Ini digunakan
replaceState
untuk memanipulasi url. Jika Anda juga menginginkan dukungan untuk IE , maka Anda harus melakukannya dengan cara yang rumit :Demo: http://jsfiddle.net/DerekL/rEpPA/
Satu lagi dengan transisi: http://jsfiddle.net/DerekL/x3edvp4t/
Anda juga dapat menggunakan
.scrollIntoView
:(Yah aku berbohong. Ini tidak rumit sama sekali.)
sumber
/show
di akhir url.$(mySelector)[0].scrollIntoView()
.scrollIntoView
. 1- untuk menyebutkannya terakhir.Saya pikir ini solusi yang jauh lebih sederhana:
Metode ini tidak memuat ulang situs web, dan menetapkan fokus pada jangkar yang diperlukan untuk pembaca layar.
sumber
window.location = window.location.origin + window.location.pathname + '#hash';
Tidak cukup perwakilan untuk komentar.
Metode berbasis getElementById () dalam jawaban yang dipilih tidak akan berfungsi jika jangkar telah
name
tetapi tidakid
disetel (yang tidak direkomendasikan, tetapi terjadi di alam liar).Sesuatu yang perlu diingat jika Anda tidak memiliki kendali atas markup dokumen (mis. Webextension).
The
location
metode yang didasarkan pada jawaban yang dipilih juga dapat disederhanakan denganlocation.replace
:sumber
Karena ketika Anda melakukannya
Anda memuat halaman baru, Anda dapat melakukan:
sumber
Saya memiliki tombol untuk prompt yang pada klik membuka dialog tampilan dan kemudian saya dapat menulis apa yang ingin saya cari dan pergi ke lokasi itu di halaman. Ini menggunakan javascript untuk menjawab header.
Pada file .html yang saya miliki:
Pada file .js yang saya miliki
Ketika saya menulis test100 ke prompt, maka itu akan pergi ke tempat saya meletakkan span id = "test100" di file html.
Saya menggunakan Google Chrome.
Catatan: Ide ini berasal dari menautkan menggunakan halaman yang sama
yang di klik akan mengirim ke jangkar. Agar dapat berfungsi beberapa kali, dari pengalaman perlu memuat ulang halaman.
Kredit kepada orang-orang di stackoverflow (dan mungkin juga stackexchange) juga tidak dapat mengingat bagaimana saya mengumpulkan semua bagian. ☺
sumber