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
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
Đăng ký:
Đăng Nhận xét (Atom)
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.