How to Make a Back Button That Works Like Browser Back

How to Make a Back Button That Works Like Browser Back

JavaScript အသုံးပြုပြီး ဘရောက်ဇာရဲ့ နောက်ဆုံးစာမျက်နှာသို့ ပြန်သွားစေမယ့် custom Back Button ကို Loader animation နဲ့အတူ ဖန်တီးနည်းကို ဖော်ပြ‌ ပေးပါမယ်။

Website သုံးစဉ် နောက်ဆုံးစာမျက်နှာကို ပြန်သွားဖို့ Browser ရဲ့ Back Button ကို သုံးတတ်ကြပေမယ့်၊ website အတွင်းမှာပဲ ဝင် ရောက်ကြည့်ရှုသူများအတွက် custom back button တစ်ခုဖန်တီးထားသင့်ပါတယ်။ JavaScript ကို အသုံးပြုပြီး ဘရောက်ဇာရဲ့ Back Button လိုတူတဲ့ custom Back Button ကို ဘယ်လိုပြုလုပ်ရမလဲ၊ နောက်ပြီး ပြောင်းရွှေ့နေစဉ်မှာ Loader animation ဖြင့် အသုံးပြုသူအတွေ့အကြုံပိုမိုကောင်းမွန်အောင် ဘယ်လိုလုပ်ရမလဲ ဆိုတာ ကို‌ဖော်ပြပေးပါမယ်။

1. dashboard ထဲက Theme ကိုနှိပ်
2. 🔽 ကိုနှိပ်၍ Edit HTML ကိုနှိပ်ပါ
3. </body> ကိုရှာ တွေ့ပြီဆိုရင် အောက်က code ကို copy ယူ၍အဲ </body> အပေါ်က နေကပ်လျက်ထည့်ပါ။

<style>
.back-btn {
  position: fixed;
  bottom: 55px;
  left: 25px;
  background: #fff;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-weight: 600;
  cursor: pointer;
  z-index: 10001;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-btn svg {
  width:30px;
  height: 30px;
  display: block;
}
.loader-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: none;  
  justify-content: center;
  align-items: center;
  z-index: 10010;
}
.loader {
  width: 40px;
  height: 40px;
  border: 6px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg) }
}
</style>
<button class='back-btn' onclick='goBack()'><svg class='line' viewBox='0 0 24 24'><path d='M9.11008 5.0799C9.98008 4.8199 10.9401 4.6499 12.0001 4.6499C16.7901 4.6499 20.6701 8.5299 20.6701 13.3199C20.6701 18.1099 16.7901 21.9899 12.0001 21.9899C7.21008 21.9899 3.33008 18.1099 3.33008 13.3199C3.33008 11.5399 3.87008 9.8799 4.79008 8.4999'/><path d='M7.87012 5.32L10.7601 2'/><path d='M7.87012 5.32007L11.2401 7.78007'/></svg></button>
<div class='loader-overlay' id='loaderOverlay'>
  <div class='loader'/>
</div>
<script>//<![CDATA[
function goBack() {
  const loader = document.getElementById('loaderOverlay');
  loader.style.display = 'flex';
  setTimeout(() => {
    history.back();
  }, 700);
}
//]]></script>

1. save နှိပ်ပြီးပြီ