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)
Tags:
 |
| 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/AVvXsEibyKO7qLGTt7oYcsAH4ratLpACyUOqQ7xY36_k4SksywKX2oWQ0Hkk_B_r16lKnYzS9MLgQIq6Dhh63sl5dHvKo1zjypOoBmJoiYdQIhDigPCON60BIKeseAxTq4MwASALuq1eepXZzlc/s1600/arrow-up-icon(1).png" width="40"/></a>
Lưu ý: Nếu trong Blog của bạn có file js rồi thì xóa thì không sẽ lỗi.
Chúc bạn thành công.
Không có nhận xét nào: