Saya pikir ini mungkin tidak mungkin, akan mencoba dan menjelaskan sebaik mungkin. Saya memiliki halaman yang berisi tab (bertenaga jquery), dikontrol oleh yang berikut:
Saya menggunakan kode ini, seperti yang diberikan oleh pengguna lain dari pertanyaan sebelumnya.
<script type="text/javascript">
$(function() {
$('html, body').animate({scrollTop:0}); // this is my "fix"
var tabContent = $(".tab_content");
var tabs = $("#menu li");
var hash = window.location.hash;
tabContent.not(hash).hide();
if(hash=="") {
$('#tab1').fadeIn();
}
tabs.find('[href=' + hash + ']').parent().addClass('active');
tabs.click(function() {
$(this).addClass('active').siblings().removeClass('active');
tabContent.hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false;
});
});
</script>
kode ini berfungsi dengan baik saat saya mengunjungi halaman "tab" secara langsung.
namun, saya perlu menautkan ke tab individual dari halaman lain - jadi untuk melakukan ini, kode mendapatkan window.location.hash
lalu menampilkan tab yang sesuai.
halaman tidak "melompat" ke jangkar karena "return false".
Namun, peristiwa ini hanya dipicu pada peristiwa klik. karenanya, jika saya mengunjungi "tab" saya dari halaman lain, efek "lompat" dipicu. Untuk mengatasi ini, saya secara otomatis menggulir ke bagian atas halaman, tetapi saya lebih suka ini tidak terjadi.
apakah ada cara untuk mensimulasikan "return false" saat halaman dimuat, mencegah jangkar "melompat" terjadi.
harap ini cukup jelas.
Terima kasih
setTimeout
dan tidak selalu berhasil. Anda mungkin tidak membutuhkannya jika ada di jQuery$(function() {
. Anda tidak benar-benar membutuhkannyalocation.hash
, tapi senang membiarkannya begitu browser mungkin tidak perlu melakukan apapun. Juga mengingatkan Anda untuk apa scrollTo itu!if
harus di luar, tidak di dalam. juga, interval minimum adalah sekitar 10, jadi 0 atau 1 sama .. sebagai 10. tergantung pada browser.Lihat jawaban saya di sini: Jawaban Stackoverflow
Triknya adalah dengan segera menghapus hashtag ASAP dan menyimpan nilainya untuk Anda gunakan sendiri:
Penting bagi Anda untuk tidak meletakkan bagian kode itu dalam fungsi $ () atau $ (window) .load () karena akan terlambat dan browser sudah pindah ke tag.
sumber
Ada cara lain untuk melacak tab yang Anda buka; mungkin menyetel cookie, atau nilai di bidang tersembunyi, dll.
Saya akan mengatakan bahwa jika Anda tidak ingin halaman melompat saat dimuat, Anda akan lebih baik menggunakan salah satu dari opsi lain ini daripada hash, karena alasan utama menggunakan hash dalam preferensi untuk mereka adalah untuk mengizinkan apa yang Anda inginkan. ingin memblokir.
Hal lain - halaman tidak akan melompat jika tautan hash Anda tidak cocok dengan nama tag di dokumen, jadi mungkin jika Anda ingin tetap menggunakan hash, Anda dapat memanipulasi konten sehingga tag diberi nama berbeda. Jika Anda menggunakan awalan yang konsisten, Anda masih dapat menggunakan Javascript untuk beralih di antaranya.
Semoga membantu.
sumber
Saya menggunakan solusi dave1010, tetapi agak gelisah ketika saya memasukkannya ke dalam fungsi siap $ (). Jadi saya melakukan ini: (bukan di dalam $ (). Ready)
sumber
Browser melompat ke
<element id="abc" />
jika ada hash http://site.com/#abc di alamat dan elemen dengan id = "abc" terlihat. Jadi, Anda hanya harus menyembunyikan elemen secara default:<element id="anchor" style="display: none" />
. Jika tidak ada elemen yang terlihat dengan id = hash di halaman, browser tidak akan melompat.Buat skrip yang memeriksa hash di url, lalu temukan dan tampilkan elemen prrpopriate (yang disembunyikan secara default).
Nonaktifkan perilaku default "tautan seperti hash" dengan mengikat kejadian onclick ke tautan dan tentukan
return false;
sebagai hasil dari kejadian onclick.Ketika saya menerapkan tab, saya menulis sesuatu seperti itu:
sumber
Tidak ada jawaban yang tidak bekerja cukup baik untuk saya, saya melihat halaman melompat ke jangkar dan kemudian ke atas untuk beberapa solusi, beberapa jawaban tidak berfungsi sama sekali, mungkin ada hal yang berubah selama bertahun-tahun. Semoga fungsi saya akan membantu seseorang.
sumber
$(document).ready(function () { preventAnchorScroll(); });
panggil saja fungsi tersebut di awal JavaScript Anda. Saya mengujinya sekarang, berfungsi untuk saya di Chrome, Firefox, dan Opera.CSS kotor hanya memperbaiki untuk tetap menggulir ke atas setiap kali jangkar digunakan (tidak berguna jika Anda masih ingin menggunakan jangkar untuk gulir-lompat, sangat berguna untuk tautan dalam):
sumber
Meskipun jawaban yang diterima berfungsi dengan baik, saya menemukan bahwa kadang-kadang, terutama pada halaman yang berisi gambar besar yang bilah gulir akan melompat dengan liar menggunakan
Yang bisa sangat mengganggu pengguna.
Solusi yang saya tetapkan pada akhirnya sebenarnya cukup sederhana, dan itu menggunakan ID yang berbeda pada target dengan yang digunakan di
location.hash
Misalnya:
Ini adalah tautan di beberapa halaman lain
Jadi tentu saja jika ada elemen dengan ID
tab2
pada halaman tab jendela akan melompat ke sana saat dimuat.Jadi, Anda dapat menambahkan sesuatu ke ID untuk mencegahnya:
Dan kemudian Anda dapat menambahkan
"-noScroll"
kelocation.hash
dalam javascript:sumber
Dalam kasus saya karena menggunakan tautan jangkar untuk sembulan CSS, saya telah menggunakan cara ini:
Simpan saja pageYOffset hal pertama saat klik dan kemudian atur ScrollTop ke sana:
sumber
Saya rasa saya telah menemukan cara untuk Tab UI tanpa mengulangi fungsinya. Sejauh ini saya belum menemukan masalah.
Semua dalam acara yang siap. Ini menambahkan "tab_" untuk hash tetapi berfungsi baik saat diklik dan halaman dimuat dengan hash.
sumber
Ini akan bekerja dengan bootstrap v3
sumber
Pendekatan lain
Coba periksa apakah halaman telah digulir dan baru kemudian atur ulang posisi:
Heres a demo
sumber
Saya tidak terlalu berhasil dengan
setTimeout
metode di atas di Firefox.Alih-alih setTimeout, saya telah menggunakan fungsi onload:
Sayangnya masih sangat glitchy.
sumber
Saya belum berhasil secara konsisten dengan solusi ini.
Rupanya karena fakta bahwa lompatan terjadi sebelum Javascript => referensi ( http://forum.jquery.com/topic/preventing-anchor-jump )
Solusi saya adalah memposisikan semua jangkar di atas secara default dengan CSS.
Kemudian gunakan jquery untuk menggulir ke induk dari jangkar target, atau saudara kandung (mungkin tag em kosong)
Contoh jquery untuk scrolling ketika URL dimasukkan dengan hash
(halaman tidak boleh dimuat di window / tab, ini mencakup link dari sumber lain / luar)
Anda juga ingin mencegah default untuk klik jangkar saat berada di halaman dan kemudian menggulir ke targetnya
dan jquery
Hal yang baik tentang metode ini adalah target tag anchor, tetap secara struktural di samping konten yang relevan, meskipun posisi CSS mereka ada di atas.
Ini berarti crawler mesin pencari tidak akan mengalami masalah.
Cheers, saya harap ini membantu
Gray
sumber
Coba ini untuk mencegah klien dari segala jenis pengguliran vertikal di hashchanged (di dalam event handler Anda):
(gambar ulang browser)
sumber
Memecahkan masalah saya dengan melakukan ini:
sumber