របៀបដាក់ Back to Top នៅក្នុង​ Blogger


សួស្ដីអ្នកទាំងអស់គ្នា ថ្ងៃនេះដែរ ខ្ញុំលើកយកគន្លឹះតូចមួយ ដែលនិយាយអំពី Back To Top។ Back To Top គឺជាមុខងារមួយ សម្រាប់ ឲ្យអត្ថបទ ដែលអូស ចុះក្រោម ត្រឡប់ទៅខាងលើវិញ ដោយមិនចាំបាច់ រមូរ ឡើងទៅវិញ។ ហើយអត្ថបទនេះ ជាផ្នែកមួយ នៃ ការប្រើប្រាស់ Widget របស់ប្លុកករ មួយដែរ បាទ។ កុំឲ្យខាតពេលចូរតាមដានជា មួយខ្ញុំឥលូវនេះ៖

វិធីប្រើ:

១-ចូលទៅកាន់គណនីរបស់អ្នក Blogger.com
២-សូមជ្រើសរើស យក Layout > Add a Gadget > HTML/JavaScript
៣-សូមចម្លងកូដខាងក្រោម ទៅដាក់នៅក្នុងនោះ
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
color: #000000;
background-color: rgba(255, 255, 255, 0);
font-size: 12px;
padding: 1em;
display: none;
}
.back-to-top:hover {
text-decoration: none;
}
</style>
<a href="#" class="back-to-top"><img src="https://1.bp.blogspot.com/-vuF7K8Ll2Jw/WTUHovQpyyI/AAAAAAAAAfo/7tiSb0QjlMA4gDxKy-oWKRbzXONKV_XpwCLcB/s1600/anime-back-to-top.png" alt="Back to Top" / /></a>
៤-សូម Save ជាការស្រេច

 ត្រង់ចំណុច ហាយឡាយ ជាកន្លែងផ្លាស់ប្ដូរ រូបភាព

អត្ថបទដោយ អាស្វាដែក

EmotionEmotion