Cài đặt nút Back To Top đơn giản trên Blog

Anh Trai Nắng
5

Ở bài viết này, mình sẽ chia sẻ nút back to top đơn giản với những bạn muốn đặt nút quay lại đầu trang trên blog của mình.

Cài đặt nút Back To Top đơn giản trên Blog
Cài đặt nút Back To Top đơn giản trên Blog

Mặc dù nút này khá đơn giản nhưng mình cảm thấy rất hấp dẫn và tối giản. Nút này sẽ xuất hiện ở góc dưới bên phải của blog của bạn.

(getButton) #text=(Live Demo) #icon=(link)

Hướng dẫn cài đặt nút back to top

Đây là CSS:

/* Back To Top */
.backtotop{display:none}.backtotop{position:fixed;bottom:50px;right:0;cursor:pointer;font-weight:bold;box-shadow:-5px 5px rgba(0,0,0,.1);padding:10px;background-color:#fff;opacity:.6}.backtotop span{background-image:url(https://2.bp.blogspot.com/-QLZM-aUhB6w/VyL3AeOfEfI/AAAAAAAADBU/g6Ff-NvsU_c3ZZn3LM0luDDCRnQjzEK9wCLcB/s1600/icon.png);background-position:0 -272px;background-repeat:no-repeat;height:25px;width:22px;display:inline-block;vertical-align:middle;margin-right:5px }.backtotop:hover{opacity:1}

Đây là JsHTML đặt trên thẻ </body> để hiển thị:

<div class="backtotop hide"><span></span>Top</div>
<script type='text/javascript'>
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},800),!1})});
</script>

Sau đó lưu lại và xem kết quả.

Kết luận

Trên đây là bài viết cài đặt nút back to top đơn giản trên blog. Bài cũ úp lên lại, hy vọng sẽ thật hữu ích cho ai đó đang tìm.

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

5 Nhận xét

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu