Nút lên đầu trang ứng dụng trượt từ jQuery
Thứ Sáu, 16 tháng 7, 2010
Phiên bản cải tiến từ sản phẩm trước (Nút lên đầu trang cố định trên màn hình của tác giả eikei-blog). Ứng dụng jQuery cho hiệu ứng trượt khi chuyển động điều hướng & chế độ ẩn hiện nút lên đầu trang cố định trên màn hình.
Có truy xuất tệp javascript jQuery bản 1.3.2. Hãy gỡ bỏ nếu website của bạn đã trang bị phiên bản cao hơn.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<style>
#toppage {
width:100px;
background:#F4FFBF;
border:1px solid #ccc;
text-align:center;
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
color:#666;
text-decoration:none;
}
</style>
<a href="#" id="toppage">Lên đầu trang</a>
<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() {
$("#toppage").scrollToTop();
});
</script>
<style>
#toppage {
width:100px;
background:#F4FFBF;
border:1px solid #ccc;
text-align:center;
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
color:#666;
text-decoration:none;
}
</style>
<a href="#" id="toppage">Lên đầu trang</a>
<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() {
$("#toppage").scrollToTop();
});
</script>
Tăng cỡ chữ
Mặc định
Giảm cỡ chữ
Liên hệ mail: tpm1512@yahoo.com và xem tất cả bài viết trang này
Tại đây
Nhấn vào theo dõi thăm trang web của Trần Phúc Minh
-
https://yogaso1.blogspot.com/2010/07/nut-len-au-trang-ung-dung-truot-tu.html?m=0
Minh cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.
MENU
Sản phẩm
Trang chủ
Nổi bậc
Tiện ích
Tài khoản
Tác vụ
YOUTUBE
Trang chủ
Lên trên
Tổng số Bình luận [ 0]
Đăng nhận xét