หลาย ๆ เว็บไซต์ หรือแม้แต่เว็บบล๊อกที่เราเห็นผ่านตา ส่วนจะมีเนื้อหาที่ยาวพอสมควร และทำให้เวลาอ่านรายละเอียด หรือข้อความต่าง ๆ มาถึงด้านล่างของหน้าเว็บ หลาย ๆ คนก็ต้องเลื่อนเม้าส์เพื่อจะขึ้นอยู่ด้านบนของหน้าเว็บ แต่รู้หรือไม่การที่เราเพิ่ม "ปุ่มกลับสู่ด้านบน หรือ Back to Top" ทำให้คนอ่านเว็บเราสะดวมากขึ้น
ทำตามขั้นตอนง่าย ๆ ไม่ยากเลย
1. ล๊อกอินเข้าสู่หน้าเว็บบล๊อกของเรา
2. คลิ๊กที่ ธีม (Theme) > กดลูกศรชี้ลง เลือก แก้ไข HTML
3. กด Ctrl + F จะมีช่องค้นหาด้านบน ให้ใส่โค้ด "</head>"
4. คัดลอก Jquery "<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js'/>" นำไปวางด้านบนของคำว่า </head> จากนั้นกด บันทึก (Save)
5. คลิ๊กที่ การออกแบบ > เพิ่ม แกดเจ็ท เลือก "HTML Javascript" แนะนำวางไว้ด้านล่างของ footer จากนั้นคัดลอก สคริปส์ด้านล่างนี้
<style>
#scroll-btn{
position: fixed;
right: 10px;
bottom: 10px;
cursor: pointer;
width: 50px;
height: 50px;
border-radius: 60px;
text-indent: -9999px;
background-color: #ffd966;
z-index: 100000;
display: none;
}
#scroll-btn span{
position: absolute;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -12px;
height: 0px;
width: 0px;
border: 8px solid transparent;
border-bottom-color: #ffffff;
}
#scroll-btn:hover{
background-color: #ff6666;
opacity: 1;
filter: "alpha(opacity=100)";
}
</style>
<a href="#" id="scroll-btn"><span></span></a>
<script>
$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100){
$("#scroll-btn").fadeIn();
}
else{
$("#scroll-btn").fadeOut();
}
});
$("#scroll-btn").click(function(){
$("html, bady").animate({scrollTop: 0}, 700);
return false;
});
});
</script>
6. จากนั้นกดบันทึก ก็จะได้ปุ่มเหมือนกับในวิดีโอด้านล่างนี้
ขอบคุณโค้ดจากเว็บ https://www.rustcodeweb.com
0 ความคิดเห็น