Mục đích của việc tạo Button Back To Top nói một cách đơn giản là trở về đầu trang nhanh nhất có thể nếu gặp một bài viết dài và bạn đã xuống xâu, hehe. Ở bài viết này mình sẽ chia sẽ cho các bạn cách tạo một button trở về đầu trang mà không cần plugin nào hổ trợ. Nói thật mình cũng ít dùng cái này lắm, hay đúng hơn là tạo ra theo phong trào cho vui nhà vui cửa thôi. Thường mình dùng 2 phím Home và End trên bàn phím để làm việc này.
Hướng dẫn tạo Back To Top Button
Vào vấn đề chính, mục đích của mình sẽ tạo ra một nút trở về đầu trang hay nói một cách chuyên nghiệp hơn là back to top button có hiệu ứng trượt lên từ jQuery và thêm thuộc tính ẩn hiện thích hợp thì bạn đang ở nơi không cần tới nó.
Đầu tiên, chúng ta bắt đầu tạo một <div> để hiển thị button:
<div id='bttop'>BACK TO TOP</div>
Màu mè cho nó thêm tí với CSS nhá:
<style type='text/css'>
#bttop{
border:1px solid #4adcff;
background:#24bde2;
text-align:center;
padding:5px;
position:fixed;
bottom:35px;
right:10px;
cursor:pointer;
display:none;
color:#fff;
font-size:11px;
font-weight:900
}
#bttop:hover{
border:1px solid #ffa789;
background:#ff6734
}
</style>
Và cuối cùng, sử dụng jQuery để cho nó có hiệu ứng trượt lên hoặc là ẩn hiện khi không cần thiết:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() != 0) {
$('#bttop').fadeIn();
} else {
$('#bttop').fadeOut();
}
});
$('#bttop').click(function() {
$('body,html').animate({
scrollTop: 0
}, 800);
});
});
</script>
Tất cả code trên bạn cho nó vào 1 cục ngay trên thẻ </body> là ok hết, hoặc bạn thích chuyển từng phần đi đâu thì chuyển rồi lấy link chèn vào. Còn cái phần button Back To Top thì bạn có thể chế biến nó thành cái gì thích hợp cho bạn cũng được. Chúc các bạn thành công!