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

Blog 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 -> Thêm HTML/JavaScript

Bỏ trống phần "tiêu đề " và dán code sau 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.
Tham khảo tại đây: Địa chỉ này

Tạo nút 'Lên đầu trang' (Back to top) cuộn mượt cho Blogger 2015-10-07T08:35:00+07:00 Rating: 4.5 Diposkan Oleh: http://pdunoteit.blogspot.com/