Celestial Samnang: ដាក់ Back to Top ប៊ូតុងដោយមិនចាំបាច់ Scroll ឡើងលើ

Back to Top គឺជាកូនប៊ូតុងមួយប្រើសម្រាប់ធ្វើការរំកិលប្លុករបស់អ្នកទៅកាន់ក្បាលទំព័រដោយស្វ័យប្រវត្តិ ដោយអ្នកមិនចាំបាច់ប្រើកូនកណ្ដុរ (Mouse) ដើម្បី Scroll ឡើយគ្រាន់តែចុចទៅលើប៊ូតុង នោះវានឹងរត់ទៅកាន់ក្បាលទំព័រដោយខ្លួនឯង។

១-សូមចូលទៅកាន់គណនីប្លុករបស់អ្នក
២-ចូលទៅកាន់ Theme បន្ទាប់មក Edit HTML
៣-ចម្លងកូដខាងក្រោមដាក់ពីខាងក្រោម <head>
ចំណាំ៖ ប្រសិនបើអ្នកមានកូដ Icon Font Awesome Version 5 រួចរាល់នៅក្នុងស្បែកប្លុកសូមរំលងចំណុចនេះ

កូដ

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/>

៤-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ ]]></b:skin>

កូដ

.back-top{display:none;z-index:1010;width:32px;height:32px;position:fixed;bottom:25px;right:25px;cursor:pointer;overflow:hidden;font-size:13px;color:#fff;text-align:center;line-height:32px;box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);border-radius:2px}
.back-top:before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-color:#673AB7;transition:all 0.7s}
.back-top:after{content:'\f077';position:relative;font-family:"Font Awesome 5 Free";font-weight:600;transition:all 0.7s}
.back-top:hover:before,.back-top:hover:after,.nav-active .back-top:after,.nav-active .back-top:before{background:#111}

៥-ចម្លងកូដខាងក្រោមដាក់ពីខាងលើ </body>

កូដ

<script type='text/javascript'>
//<![CDATA[
$(".back-top").each(function(){var a=$(this);$(window).on("scroll",function(){100<=$(this).scrollTop()?a.fadeIn(250):a.fadeOut(250)}),a.click(function(){$("html, body").animate({scrollTop:0},500)})});
//]]>
</script>
<div class='back-top' title='Back to Top'></div>

៦-ចុចពាក្យ Save Theme៕