Back to top là một “nút” chức năng trên trình duyệt giúp khách truy cập có thể trở về phần đầu trang một cách nhanh chóng. Xét về giao diện, Back to top sẽ được phân thành 2 loại :
- Không có hiệu ứng: ấn vào cái là tót lên đầu trang luôn. Rất nhanh nhưng không chuyên nghiệp.
- Có hiệu ứng: thanh cuộn trượt theo chiều dưới lên. Trông okie hơn nhiều ⇒ đây cũng sẽ là nội dung mà mình chia sẻ hôm nay.
Code tạo nút back to top
Với đoạn code dưới đây, bạn có thể tạo nút back to top cho wordpress, blogspot (blogger) hay bất cứ nền tảng ngôn ngữ nào khác sử dụng để lập trình web.
– Code gồm 3 phần: HTML, CSS và javascript / jquery.
– Copy – paste vào trong cặp thẻ <body></body> nhé.
Mã HTML
<div class=’lentop’>
<div>
<img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmapIT_7wZGVJuQgKQ8lNktQqpB7BRfN72M6jp4Gu6__jC0LyM_uRguz8jcgpOsYht13SisvB79ymDrD9FWRIwtPRBEDBQKGMETtHGtNDctbUFZg3gpEe6QFlHhiPiYXSyK1W8_lzNnjh0/s1600/top.png’/>
</div>
</div>
Mã CSS
.lentop {display:none; bottom: 40%; right: 10px; cursor: pointer; position: fixed; z-index: 1000;}
.lentop div {background:crimson; border:2px solid #fff; border-radius:45px; padding:11px 12.5px; box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.3)}
.lentop img {width:16px; height:16px;}
Mã javascript / jquery
– 100: là khoảng cách tính từ đầu trang web xuống tới khi xuất hiện nút Back to Top, đợn vị pixel.
<script src=”http://code.jquery.com/jquery-latest.js”></script>
$(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 100) $(“.lentop”).fadeIn();
else $(“.lentop”).fadeOut();
});
$(“.lentop”).click(function () {
$(“body,html”).animate({scrollTop: 0}, “slow”);
});
});
