Rumah  >  Artikel  >  hujung hadapan web  >  JQuery melaksanakan tatal lancar antara pautan sauh pada page_jquery yang sama

JQuery melaksanakan tatal lancar antara pautan sauh pada page_jquery yang sama

WBOY
WBOYasal
2016-05-16 16:32:461243semak imbas

Saya sentiasa menggunakan JQuery untuk pembangunan web bahagian hadapan Hanya selepas saya berhubung dengannya, saya menyedari bahawa JQuery jauh lebih berkuasa daripada yang saya fikirkan, dan ia mungkin lebih berkuasa daripada yang saya sedari, terutamanya yang saya fikirkan. dengan keserasian yang lebih baik, jadi saya memutuskan untuk menggunakan JQuery Beberapa perkara yang menyeronokkan dan menarik, yang boleh menggantikan JS, semuanya digunakan.

Memperkenalkan topik hari ini daripada JQuery, menggunakan JQuery untuk mencapai tatal lancar antara pautan sauh. Saya sebelum ini telah memperkenalkan kesan penampan anchor jump yang dilaksanakan menggunakan JS Kesannya agak baik dan boleh mencapai tatal yang lancar di antara pautan sauh pada halaman yang sama. Sekarang ia lebih baik telah Dengan JQuery dimuatkan, kita boleh mencapai kesan yang sama dengan kod yang lebih pendek.

Cara menggunakannya:

1. Muatkan perpustakaan JQuery;

2. Kod kunci:

$(document).ready(function() { 
$('a[href*=#]').click(function() { 
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { 
var $target = $(this.hash); 
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']'); 
if ($target.length) { 
var targetOffset = $target.offset().top; 
$('html,body').animate({ 
scrollTop: targetOffset 
}, 
1000); 
return false; 
} 
} 
}); 
});
Saya masih ingin menekankan susunan pemuatan, rujuk dahulu perpustakaan kelas JQuery. Ngomong-ngomong, selepas ujian, kesan tatal serasi dan boleh digunakan dalam semua penyemak imbas, tetapi ia berkelakuan agak pelik di bawah Opera dan perlu diperbaiki.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn