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

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

Code:

<!--Back to Top Button Start-www.thenaynhe.com--><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>
<!--Back to Top Button End-www.thenaynhe.com-->

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: