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.

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.
Live Demo

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ả.

Trên đây là bài viết cài đặt nút back to top đơn giản trên blog. Hi vọng sẽ thật hữu ích cho các bạn.