Breaking

Thursday, December 6, 2012

Nút trượt lên đầu trang

Cách đơn giản:
Kết hợp thuộc tính href="#" của slk (siêu liên kết) với thuộc tính trong css cho ảnh làm bottom luôn cố định trên màn hình:
<a href='#' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='Top'>
<img src='http://png.findicons.com/files/icons/1620/crystal_project/32/top1.png' alt='img top' style='border:0px;'/>
</a>
xam các mẫu bottom top tại kho icon http://findicons.com/search/top
Cách chi tiết hơn: Bottom sẽ ẩn khi đang xem phần trang trên cùng.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(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() {
$("#web-bendoi").scrollToTop();
});
//]]>
</script>
<style type="text/css">
#web-bendoi {width:100px;border:0px;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#8000FF;text-decoration:none;}
</style>
<a href="#" id="web-bendoi">
<img src='http://png.findicons.com/files/icons/1620/crystal_project/32/top1.png' alt='' style='border:0px;'/> TOP</a>


No comments:

Post a Comment