Nút chuyển lên đầu trang web trượt đẹp
Nếu như bạn từ xem bài mot-so-kieu-hien-thi-co-dinh-tren-man-hinh thì kiểu này khá đơn giản và nhanh chóng.
Nếu bạn muốn nó cầu kỳ hơn, tạo hiệu ứng trượt và ẩn khi đang ở trên cùng thì tham khảo code này.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});
$(function() {
$("#toTop").scrollToTop();
});
</script>
<style type="text/css">
#toTop {position:fixed;bottom:10px;right:10px;cursor:pointer;}
</style>
<a href="#" id="toTop">Scroll to Top</a>
Có nhiều trang giới thiệu nhưng không ghi rõ nguồn thậm chí có trang khá nổi tiếng do nhiều người quản trị còn đề tên mình lên code.
Mình lùng sục tìm nó thì thấy đây là Version: 1.0, 12/03/2009 tại ph-creative.com. Hiện nay trang đó không còn bài này!
Ghi chú: Mình giữ nguyên phần javascript, còn css và html rút gọn lại cái quan trọn và cho đơn giản dễ nhìn nhất.
Theo mình thì bạn chỉ nên sử dụng code này nếu trang web đã có sẵn file jquery.min.js, còn nếu không thì chẳng cần tốn cái jquery.min.js cho 1 hiệu ứng này mà ta có thể thay thế nó bằng bài đơn giản hơn chỉ với html+css.
Bạn có thể thay chữ "Scroll to Top" bằng link ảnh tại những kho icon, ví dụ như trang http://findicons.com/search/top#ajax
thao! bendoi.vn
Lên trên nào
Chủ đề: l. Library l.Mouse cursor p.JavaScript p.JavaScript practice