Tạo nút cuộn "Lên đầu trang" đẹp và mượt cho blogspot

Khi lướt web đọc báo đôi khi bài viết quá dài, độc giả muốn kéo lên trên đầu trang xem tiếp sẽ gặp khó khăn và bất tiện, để khắc phục tình trạng này blog cần tạo thêm một nút cuộn "Lên đầu trang" (Back to top)

Demo nút cuộn "Lên đầu trang" đẹp và mượt cho blogspot

Đối với blogger đây là một thủ thuật blogspot rất hay, bạn chỉ việc copy đoạn code bên dưới vào trước thẻ </body> trong Mẫu :

<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="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbzDNlMd8LNpDr6oXeEPtgyE8AlbLpX2UfvYk7awsrmm50t10o74Ub4E69_Z2aO9DKs7cQuocJb7YIDmwxS0IRlPyDiVPnCSPD3KzC1GauTCrg27xlJjzOMgVgEsgUowKeAjmKpZQvZ7I/s1600/arrow-up-icon(1).png" width="40"/></a>