Tổng hợp cách tạo Back To Top button cho website/blog

Back To Top button (nút 'Lên đầu trang') là một thành phần được rất nhiều người áp dụng đối với website của mình. Nó rất tiện lợi, giúp người dùng có thể dễ dàng trở về đầu trang chỉ với 1 click chuột mà không cần phải sử dụng thanh cuộn trang. Bài viết này mình sẽ chia sẻ một số cách tạo nút Back To Top cho website thông dụng, dễ thực hiện.

Cách 1: Sử dụng code liên kết:
- Đây là cách đơn giản nhất, chỉ với một đoạn code HTML đơn giản, bạn đã có thể đặt Back To Top button vào website của mình. Cách này phù hợp với những ai thích sự đơn giản, muốn tối ưu tốc độ load trang. Sử dụng 1 trong những đoạn code sau để chèn vào vị trí muốn hiển thị trên web của bạn:

Code 1:

<a href='#' alt='Back to top (kjmagic.blogspot.com)'>Back To Top</a>

Code 2:

<a href='#top' alt='Back to top (kjmagic.blogspot.com)'>Back To Top</a>

Code 3 (sử dụng hình ảnh):

<a href='#' alt='Back to top (kjmagic.blogspot.com)'><img src='Link ảnh của bạn'></img></a>

• Có thể chỉnh sửa những chỗ màu xanh theo ý bạn.
• Sửa chỗ màu hồng thành link ảnh Back To Top của bạn.

Cách 2: Sử dụng jQuery:

- Cách này sẽ tạo ra một button nằm cố định chạy theo web của bạn. Khi bạn click nó sẽ cho trang cuộn lên đầu với hiệu ứng trượt đẹp mắt.Mình chưa test với những website khác nhưng với Blogger thì cách này rất ổn định, blog nào cũng có thể áp dụng. Cách này cũng không ảnh hưởng nhiều đến tốc độ load trang. Đối với Blogger, chèn đoạn code sau vào trước thẻ đóng </body> trong template của bạn:

<!--Back to top button by kjmagic.blogspot.com-->
<style type='text/css'>
#dt-btt{border:1px solid #FF0000;background:#444;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#dt-btt:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='dt-btt'>Back To Top</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#dt-btt').fadeIn();}else{$('#dt-btt').fadeOut();}});$('#dt-btt').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>
<!--/Back to top button by kjmagic.blogspot.com-->

• Có thể sửa chỗ mình in đậm theo ý thích của bạn (có thể chèn ảnh bằng đoạn code <img src='Link ảnh' alt='Back to top (www.đoàntrịnh.vn)'></img>).
• 800 là tốc độ khi cuộn trang, các bạn cũng có thể tùy chỉnh theo ý muốn.

Trên đây là 2 cách tạo nút Back To Top thông dụng, dễ thực hiện, tối ưu tốc độ load trang mà mình biết. Nếu bạn có cách thực hiện tương tự nhưng khác lạ thì có thể chia sẻ tại phần comment bên dưới.

Chúc các bạn thành công !