Tạo nút back to top lên đầu trang với css và jquery - 123itvn.com


Cộng đồng vui bựa status Tham gia đê

Tạo nút back to top lên đầu trang với css và jquery


Back to top - điểm nhấn để website của bạn trở nên chuyên nghiệp hơn.


Tạo nút back to top lên đầu trang với css và jquery
Tạo nút back to top lên đầu trang với css và jquery

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://1.bp.blogspot.com/-k6sikOdzFXQ/VwqCKDosmEI/AAAAAAAAKxE/nLxLhkTIO6o3iE5ZWmtxo2bf4QHdzPQNQ/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 : 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");
});
});



Từ khóa tìm kiếm :

  • tạo nút back to top cho wordpress
  • tạo nút back to top với jquery
  • back to top html
  • trở về đầu trang html
  • tạo nút lên đầu trang với css và jquery
  • tạo nút lên đầu trang cho blogspot
  • nút quay về đầu trang html
Website giải trí số 1 Việt Nam hàng trăm năm qua
Tham gia đê !!!

Có thể bạn sẽ thích

Bình luận !