Chủ Nhật, 13 tháng 10, 2013

Tạo nút lên đầu trang mượt mà.

Nút chuyển lên đầu trang web được tích hợp jQuery giúp tạo hiệu ứng trượt, đồng thời nút sẽ tự động ẩn đi khi người xem đang tham chiếu ở đầu trang web.

Trang đang dùng hiệu ứng này nè : http://muathukn.blogspot.com/

DEMO: http://www.code1k.com/demo/2012/08/cai-tien-nut-len-au-trang-truot.html

http://2.bp.blogspot.com/-m8WrKNWQ2gI/UCyfA-WqPII/AAAAAAAAQp8/-AP7Gwvd4ww/s1600/nut-chuyen-len-dau-trang-web-code1k.com.png

Chèn đoạn CODE sau vào trước thẻ đóng : </body> nhá

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<style type="text/css">
#toppage1k {
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="#code1k-totop" id="toppage1k"><img src='http://2.bp.blogspot.com/-m8WrKNWQ2gI/UCyfA-WqPII/AAAAAAAAQp8/-AP7Gwvd4ww/s1600/nut-chuyen-len-dau-trang-web-code1k.com.png' alt='' style='border:0px;'/> Lên trên</a>

<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() {
$("#toppage1k").scrollToTop();
});
//]]>
</script>