HOME ABOUT CONTACT SITEMAP
Category
This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Tuesday, 13 December 2016

[Blogger] Scroll to top/down đẹp mắt cho blogspot

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 !

Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js