BACK TO TOP TÊN LỬA NEW CODE BẰNG JQUERY

Cái này thấy có người share từ file của http://svbinhduong.com/ rồi.
Đây là file js của họ làm ra: http://svbinhduong.com/backtop/scripts.js
Kinh khủng chưa.: đối với jquery bạn hoàn toàn có thể đọc hiểu và code k bằng 1 nữa.

Nếu bạn chỉ muốn dùng thì k cần quan tâm nó làm j,


Còn nếu muốn học để có thể hiểu và nâng cao jquery thì xem ở đây:
Demo : http://svphuyen.com/jimmylin/myweb/cssjs/top/

Cái này là code jQuery... không phải js đơn thuần như của người ta nhé... nên code lun lun ngắn gọn và dễ hiểu hơn nhiều....
Mức độ giống là 99%
Cách làm:
B1:Ta có ảnh Sprite

Code:

http://data.sinhvienit.net/2012/T06/...T.Net---up.png

Ta thấy ảnh này có 6 trạng thái...thì ta chắc chẳn nghỉ đến việc là dùng background-position.
6 trạng thái có background-position như sau:
Trang thái 1 có : background-position :0px 0px
Trang thái 2 có : background-position :-149px 0
Trang thái 3 có : background-position :-298px 0
Trang thái 4 có : background-position :-447px 0
Trang thái 5 có : background-position :-596px 0
Trang thái 6 có : background-position :-745px 0
Với từng giá trị trên ta thu đc các vị trí hiển thị ảnh khác nhau.. cứ -149px thì ta thu đc 1 ảnh bên phải nó..số 149px biết đc là dựa vào demo gốc mới biết chính xác.. ng` làm ra ảnh Sprite họ biết.
Code CSS:
Code:

Code:

#totop,#totop2{
    position: fixed;right: 0;bottom: 10px;
    width: 149px;height: 249px;overflow: hidden;
    cursor: pointer;display: none;
    background: url(up.png) no-repeat 0px 0;
    z-index: 9999;
}
#totop2{
    background: url(up.png) no-repeat -149px 0;
}

Code jQuery:
Code:

Code:

<script>
$(function(){
    $('html').append('<div id="totop"></div><div id="totop2"></div>')
    $('#totop').hover(function(){
        $('#totop2').fadeIn().mouseout(function(){
            $(this).fadeOut(200)
        })
    })
    var defaultTop=$(window).height()-10-249//10 vi trí canh bottom ban đau, 249 là chieu cao
    $(window).resize(function(){
        defaultTop=$(window).height()-10-249
    })
    var ranPo=['-298px 0','-447px 0','-596px 0','-745px 0']
    $(window).scroll(function(){
        var $top=$(window).scrollTop()
        if($top>50){
            $('#totop').fadeIn(100)
            $('#totop2').css('top',defaultTop)
           
        }else{
            $('#totop,#totop2').fadeOut(100)
        }
    })
    $('#totop2').click(function(){
        timeranPo=window.setInterval(function(){
          $('#totop2').css({'background-position':ranPo[Math.floor(Math.random()*ranPo.length)],'display':'block'})
        },200)
        setTimeout(function(){
            $('html,body').stop().animate({scrollTop:'50px'},400,function(){
                $('#totop2').stop().animate({'top':'-250px'},300,function(){
                    clearInterval(timeranPo)
                    $('#totop2').css('background-position','-149px 0').hide()
                })
            })
        },800)
    })
})
</script>

Đọc để mà k hiểu code viết j thì để lại comment nhé... còn k quan tâm thì copy code về dùng.

Chú ý: Chèn thư viện jquery.min.js nếu chưa có.

=UPDATE=
HƯỚNG DẪN
Down về.. up thư mục gốc.
Chèn code này vào cuối footer=> đối với web khác cũng tương tự....

Code:

<link rel="stylesheet" type="text/css" href="backtotop/backtotop.css" />
<script type="text/javascript" src="backtotop/backtotop.js"></script>

Down:http://www.mediafire.com/?hvh0vzgxfehdtc3=>> link đính kèm ở dưới là khác nhá... cái đó là demo web thôi.