Cách 1:
Cách này rất đơn giản, dễ sử dụng nhưng không đẹp cho trang web của bạn, đó là cách sử dụng thuộc tính Href. Sao chép code sau và chèn vào vị trí trang web bạn muốn:
<a href="#" title="Lên đầu trang"/>Lên đầu trang</a>;
Cách 2:
Cách này hơi phức tạp nhưng chuyên nghiệp. Làm cho web của bạn thêm pro hơn. Cách làm như sau:
1. Chèn đoạn code sau vào vị trí trang web cần hiển thị:
<div id="goTop"> <img src="duong-dan-hinh/back-to-top.png" alt="back to top" /> </div>
2. Dán đoạn css sau vào file css (nếu có) hoặc vào trực tiếp vào web:
<style type="text/css"> #goTop { bottom: 200px; cursor: pointer; display: none; height: 35px; position: fixed; right: 155px; width: 44px; z-index: 1000; } </style>
3. Chèn đoạn JavaScript sau vào file chứa nút back to top như ở bước 1. Hoặc chèn vào file JavaScript (nếu có):
<script src="https://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>
Lưu ý:
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’);
Chúc các bạn thành công.
Quốc Sơn – Kiến Thức Mẹo Vặt
