Với 1 trang web thì việc tạo nút lên đầu trang và xuống cuối trang là rất cần thiết , nó vừa giúp người xem tránh được thao tác cuộn chuột và cũng tăng thêm tính chuyên nghiệp cho trang web của bạn
Khi cuộn trang xuống thì nút back to top mới xuất hiện và javascript sẽ làm cho hiệu ứng thêm sinh động hơn
Xem live demo ngay tại bài viết này
Trước tiên bạn đăng nhập vào blogger vào phần Mẫu và chọn chỉnh sửa HTML
Tiếp theo bạn đặt đoạn code này vào trong cặp thẻ <body> ... </body>
cứ kéo chuột xuống tít cuối cùng là sẽ thấy thôi không cần Crtl F
<div id="bttop"> <i class="fa fa-chevron-up" title="Back to top"></i></div> <script type="text/javascript">$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},400);});}); </script> <div id="btbt"><a class="btbottom" href="javascript:window.scrollTo(0,999999)" title="Back to bottom"><i class="fa fa-chevron-down"></i></a></div>
Thêm 1 ít css cho sinh động. Crtl F và tìm tới thẻ đóng ]]></b:skin>và đặt đoạn code này trước nó
#bttop,#btbt{background:#353231;text-align:center;padding:8px 11px;position:fixed;right:1%;cursor:pointer;color:#fff;font-size:15px;font-weight:900;border-radius:3px} #bttop:hover,#btbt:hover{background:#001989;transition:.3s} .btbottom i,#bttop i{color:#fff} #bttop{bottom:50%;display:none} #btbt{bottom:44%}
Cuối cùng là lưu mẫu và xem kết quả. bạn có thể tùy chỉnh css theo ý của bạn nhé và lưu ý muốn thay đổi tốc độ khi lên đầu trang thì chỉnh giá trị màu đỏ này animate({scrollTop:0},400);});}); số càng nhỏ thì quá trình cuộn trang diễn ra càng nhanh và ngược lại
Good Luck !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên