Thứ Sáu, 5 tháng 12, 2014

Tạo nút 'Lên đầu trang' (Back to top) cuộn mượt cho Blogger

log bạn quá dài và người đọc muốn chỉ cần một thao tác click chuột là có thể lên đến đầu trang blog. Bài viết sẽ hướng dẫn bạn chèn thêm nút "Lên đầu trang" mỗi khi bạn di chuyển ra xa đầu trang cùng hiệu ứng chuyển mượt đẹp mắt.
Cách thực hiện :
Đi đến Blogger Dasboard > chọn blog của bạn > chọn thẻ Layout > nhấn Add a Gadget > Chọn Thêm HTML/JavaScript






Bỏ trống phần Tiêu đề và dán đoạn code sau đây vào phần Nội dung:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script> jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script> <style> div#page { max-width: 900px; margin-left: auto; margin-right: auto; padding: 20px; } .back-to-top { position: fixed; bottom: 2em; right: 0px; text-decoration: none; color: #000000; background-color: rgba(235, 235, 235, 0.80); font-size: 12px; padding: 1em; display: none; font-weight: bold; } .back-to-top:hover { background-color: rgba(135, 135, 135, 0.50); text-decoration: none; } </style> <a class="back-to-top" href="#">Len dau trang</a>

Sau đó nhấn Lưu tiện ích và bạn đã thành công.
Bài viết tham khảo từ trang Gumdi.com

0 nhận xét:

Đăng nhận xét

Vui lòng nhận xét để nhận được sự trợ giúp tốt nhất.