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

Ở 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

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à Js và HTML đặ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.