မည်သို့ လုပ်ရမလဲ
ပုံစံများကို အသုံးပြု၍ အမြန်ဆုံး လွှတ်တင်စက်ပြောင်းလဲမှု ကို တင်ပြခြင်း
လှည့်ခြင်း ရွှေ့ပြောင်း
Section 1
ကျွန်တော် ကို စိတ်တော်ဝင်ပါ လှည့်ခြင်း ရွှေ့ပြောင်း လျှင် အောက်တွင် အစိတ်အပိုင်း 2 သို့ လှည့်ပါလိပ် ကို စိတ်တော်ဝင်ပါ လှည့်ခြင်း ရွှေ့ပြောင်းခြင်း ကို လက်ခံပါ
မှတ်ချက်:scroll-behavior အခြေအနေ ကို ဖယ်ရှားပါ လှည့်ခြင်း ရွှေ့ပြောင်းခြင်း ကို ဖျက်သိမ်းပါ
လှည့်ခြင်း ရွှေ့ပြောင်း
အချက်အလက် <html> အတွက် ထပ်ပေါင်းပါ scroll-behavior: smooth လုံးဝ လှည့်ခြင်း ရွှေ့ပြောင်းခြင်း ကို လုပ်ပေါင်းနိုင်
မှတ်ချက်:သို့မဟုတ် အချက်အလက် ကို လှည့်ခြင်း ရွှေ့ပြောင်းအုပ်ချုပ်အုပ်ချုပ် ကို ထပ်ပေါင်းပါ
အကျိုး
html {
scroll-behavior: smooth;
}
ဘာသာ အားကစား
အချက်အလက် မှာ လှည့်ခြင်း အခြေအနေ ကို လက်ခံ ပြီး ဖြစ်
| ချီလို | အိုဂျာယာ | ဖက်ဖရီ | ဆာဖီ | အိုပီ |
|---|---|---|---|---|
| ချီလို | အိုဂျာယာ | ဖက်ဖရီ | ဆာဖီ | အိုပီ |
| 61.0 | 79.0 | 36.0 | 14.0 | 48.0 |
အသုံးပြုနိုင်
မမြင်တွေ့ မှု မရှိ 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();
// အစိတ်အပိုင်း ကို ကိုင်တွယ်ပါ
var hash = this.hash;
// jQuery ရဲ့ animate() စက်မှု ကို လှည့်ခြင်း ရွှေ့ပြောင်းခြင်း ကို ရွှေ့ပြောင်းပါ
// ရွှေ့ပြောင်းရန် လိုသော မိတ်ဆက် (800) ကို သုံးပါ
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// လျှင်ဝင် လှည့်ခြင်း ပြီးနောက် အစိတ်အပိုင်း (#) ကို URL သို့ ထပ်ပေါင်းပါ (မူကြမ်း လုပ်ကြည့် ပုံ)
window.location.hash = hash;
);
} // End if
);
);
</script>
