Có nhiều website có nội dung quá nhiều trên một trang, khiến việc di chuyển trở lên đầu trang khi đã xem hết nội dung trở nên khó khăn hơn. Để khắc phục điều này ta chỉ cần tạo ra một nút di chuyển, khi người truy cập đã xem hết nội dung và muốn di chuyển lên đầu trang thì chỉ việc click vào nút đó thay vì phải sử dụng Scroll di chuyển chậm chạm. Sau đây là hướng dẫn giúp bạn tạo ra chức năng này trên web, và bạn chỉ tốn chưa đầy 5′ cho việc này.
Có 2 cách để tạo ra chức năng này:
Cách 1: cách này khá đơn giản và dễ thực hiện, bạn chỉ việc thêm một thẻ liên kết với thuộc tính HREF mang giá trị “#” vào vị trí chân trang trên trang web của bạn là được. Ví dụ bạn chèn đoạn mã HTML dưới đây:
<a href="#" title="Lên đầu trang">Lên đầu trang</a>
Cách này ưu điểm là nhanh và dễ làm, không sử dụng JavaScript. Nhưng nhược điểm là khi click để lên đầu trang thì người dùng bị “bay” lên đầu trang thay vì di chuyển lên, đôi khi khiến người xem cảm thấy đột ngột và khó chịu đồng thời nút này chỉ nằm ở cuối trang dẫn đến việc người dùng xem đến giữa trang hay bất kể vị trí nào khác ngoài chân trang thì đều không có nút này để di chuyển, ngoài ra cách này cũng tạo cảm giác thô cứng, thiếu mượt mà.
Cách 2: Cách này sẽ khắc phục được những nhược điểm của cách 1, nhưng bạn sẽ tốn thêm chút thời gian cho cách này. Bạn có thể làm theo các bước sau:
1/Chèn đoạn mã HTML sau vào vị trí mà bạn muốn hiển thị nút “Lên đầu trang”:
Quote
<div id="goTop">
<img src="duong-dan-hinh/back-to-top.gif" alt="demo" />
</div>
2/Style cho nút với đoạn css sau:
Quote
<style type="text/css">
#goTop {
bottom: 200px;
cursor: pointer;
display: none;
height: 35px;
position: fixed;
right: 155px;
width: 44px;
z-index: 1000;
}
</style>
3/Thêm đoạn JavaScript sau:
Quote
<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() > 100) $('#goTop').fadeIn();
else $('#goTop').fadeOut();
});
$('#goTop').click(function () {
$('body,html').animate({scrollTop: 0}, 'slow');
});
});
</script>
Nhớ bỏ dòng thư viện jQuery 1.7.2 nếu web bạn đã có thư viện jQuery.
Đoạn code trên sẽ thực hiện việc xác định thời điểm xuất hiện nút “Go to top” khi bạn Scroll chuột hay di chuyển nội dung web xuống dưới. Tùy trường hợp bạn có thể tùy chỉnh thêm bớt vị trí mà nút sẽ xuất hiện khi cách đầu trang bao nhiêu bằng cách thay số 100 trong dòng code if ($(this).scrollTop() > 100) $('#goTop').fadeIn(); đơn vị ở đây là pixel(px). Bạn cũng có thể thay tốc độ di chuyển từ vị trí click lên top trang bằng cách thay đổi thuộc tính “slow” bằng số, ví dụ như 1000 = 1 giây tại dòng code $('body,html').animate({scrollTop: 0}, 'slow');
4/Done: Chúc bạn thành công.
