ວິທີການທີ່: ຫຼິ້ນທີ່ຊັບຊ້ອນ
ຮຽນວິທີການໃຊ້ CSS ເພື່ອສ້າງຜົນຄະແນນຫຼິ້ນທີ່ຊັບຊ້ອນ
scroll-behavior: smooth
Section 1
ຄົນທີ່ບາງຄົນຈະບັນທຶກຄົນທີ່ບາງຄົນຈະບັນທຶກ
ຄວາມຕາມການຍົກຍ້າຍ scroll-behavior ສາມາດຍົກຍ້າຍການຫຼົງສັ່ງຫຼາຍ
Section 2
ຄົນທີ່ບາງຄົນຈະບັນທຶກscroll-behavior: smooth
ເພື່ອ <html> element scroll-behavior: smooth ສາມາດເປີດການຫຼົງສັ່ງຫຼາຍບັນຊີ
ຄວາມຕາມກໍ່ສາມາດເພີ່ມເຂົ້າໃນບັນຊີສະເພາະ/ການຫຼົງສັ່ງ
ຄວາມຄົບຖ້ວຍ
html {
scroll-behavior: smooth;
}
ຄວາມສະຫຼາດບັນຊີ
ຈຳນວນທີ່ຂຽນໃນຕາຕະລາງສະແດງຄວາມສະຫຼາດທົດລອງ scroll-behavior ຂອງບັນຊີທຸກບັນຊີ
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 61.0 | 79.0 | 36.0 | 14.0 | 48.0 |
ການແກ້ໄຂຕະຫຼາດຫຼາຍບັນຊີ
ສຳລັບບັນຊີທີ່ບໍ່ສາມາດທົດລອງ scroll-behavior scroll-behavior ສຳລັບບັນຊີທີ່ບໍ່ສາມາດທົດລອງ scroll-behavior jQuery）ເພື່ອສ້າງຄວາມພັດທະນາສຳລັບທຸກບັນຊີສາວະພາບ
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// ການໃຫ້ຄວາມກົດຂອງການຫຼົງສັ່ງຫຼາຍ
$("a").on('click', function(event) {
// ກໍາລັງຄວາມມີຄູ່ມູນ this.hash
if (this.hash !== "") {
// ການປ້ອງກັນພາລະການຄົ້ນຫຼົງຄືກັນ
event.preventDefault();
// ບັນທຶກຄູ່ມູນ hash
var hash = this.hash;
// ການໃຊ້ຄວາມກົດຂອງ animate() ຂອງ jQuery ເພື່ອການຫຼົງສັ່ງເບິ່ງຫຼາຍ
// ຈຳນວນທີ່ສາມາດເລືອກ (800) ສຳລັບການຫຼົງສັ່ງໄປບ່ອນທີ່ຕ້ອງການໃນມື້ອາທິດ
($('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// ພຽງພໍທີ່ການຫຼົງສັ່ງຫາ URL (ພາລະການຄົ້ນຫາຄືກັນ)
window.location.hash = hash;
);
} // End if
);
);
</script>
