Thêm Nút Lên Đầu Trang - Back To Top Button

Chắc hẳn nhiều bạn thấy các trang blog bây giờ hay có một cái Nút treo lơ lửng ở chân trang (thường là bên phải) để phục vụ việc quay trở lại đầu trang ngay lập tức, mà không cần phải kéo hay scroll thanh trượt….Nút Back to Top này rất tiện lợi với người dùng, đặc biệt với các bài viết dài, site bị kéo dài và nhiều thông tin. Hoặc site bạn chưa có một Menu được ghim cố định. Và người đọc buộc lòng phải trượt lại đầu trang.

Back To Top Button

Là một xu thế đang dần phổ biến, nếu site bạn chưa có thì hãy cập nhật ngay nào

Cách thêm Nút Back To Top vào trang blogger/blogspot

Đầu tiên Log-in blogger và vô trong HTML

CTR+F: jquery

Kiểm trang trong HTML xem có JQUERY chưa nhé. Có rùi thì bỏ qua công đoạn này.

Nếu trong HTML của bạn chưa có thì chèn thẻ Script dưới đây vào trong thẻ <head> nhé:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script>

Tiếp theo: Thêm đoạn code dưới đây vào trong thẻ <body> . Nên trước thẻ đóng </body> là OK

Code:

<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;}
.back-to-top:hover {
text-decoration: none;}</style>
<a href="#" class="back-to-top"><img src="#" alt="Back to Top" /></a>


Bấm Save HTML. Và kiểm tra blog đi nào

Link màu blue là hình ảnh Button. Bạn có thể tự thiết kế một kiểu và thay vô. Hoặc vô Google image search với từ khóa: back to top . Sẽ có vô số hình ảnh để lựa chọn 🙂
Dưới đây là một số ảnh button tham khảo: