JQuery melaksanakan tatal lancar antara pautan sauh pada page_jquery yang sama

WBOY
Lepaskan: 2016-05-16 16:32:46
asal
1272 orang telah melayarinya

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; 
} 
} 
}); 
});
Salin selepas log masuk
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.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!