Hướng dẫn tạo Button Back To Top trở về đầu trang

back_to_top

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 HomeEnd 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!

Hướng dẫn tạo Button Back To Top trở về đầu trang 3.75/5 (75.00%) 4 votes

Hãy bình luận, góp ý bằng Disqus để được hồi đáp nhanh hơn!
Sử dụng Facebook hoặc Google nếu không load được Disqus

Nhận nhiều thông tin bổ ích và quà tặng hấp dẫn
từ MELYWEB

Theo dõi blog MELYWEB để nhận được các tin tức bổ ích, khuyến mãi mới nhất, các quà tặng hấp dẫn.