Chèn nút Back To Top tên lửa với hiệu ứng jQuery vào website

Nút Back To Top (về đầu trang) thường được chèn vào website với mục đích là khi trang bạn đang xem quá dài, khi kéo xuống gần cuồi trang nếu như bạn lười scroll chuột lên thì chỉ cần click vào nút này là nó tự bắn lên trên đầu.

Hiện tại diễn đàn chúng ta cũng có sử dụng nút Back To Top ở góc phải cuối forum, tuy nhiên trông nó thật đơn giản.

Hôm nay mình xin giới thiệu cho các bạn nút Back To Top có hiệu ứng rất màu mè và bắt mắt (chắc là các bạn đã từng thấy ở đâu đó khi lướt web rồi).

Click vào xem demo online để thấy được hiệu ứng rất thú vị nhé: http://forumdemo.vietdesigner.net/



Nói chung là vô cùng đơn giản, bạn chỉ cần copy đoạn code dưới đây vào dưới footer của bạn là xong!

Code:

<script src="https://forum.vietdesigner.net/data/codes/backtotop-tenlua/tenlua.js"></script>
<style>
*{margin: 0;padding: 0;}
body{
    background: #e0e0e0;
}
#totop,#totop2{
    position: fixed;right: 0;bottom: 10px;
    width: 149px;height: 249px;overflow: hidden;
    cursor: pointer;display: none;
    background: url(https://forum.vietdesigner.net/data/codes/backtotop-tenlua/up.png) no-repeat 0px 0;
    z-index: 9999;
}
#totop2{
    background: url(https://forum.vietdesigner.net/data/codes/backtotop-tenlua/up.png) no-repeat -149px 0;
}
</style>
<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 là vị trí cạnh bottom ban đầu, 249 là chiều cao
    $(window).resize(function(){
        defaultTop=$(window).height()-10-249//phòng trường hợp resize trình duyệt
    })
    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ái background bạn nên chỉnh sang màu mà website bạn đang dùng, ví dụ màu background mà forum đang dùng là #e0e0e0 thì thay y chang vậy. Và điều chỉnh các thông số khác cho phù hợp là ok

Chúc các bạn thành công!

P/s: bạn cũng có thể Photoshop chỉnh sửa lại cái file up.png để nhìn cho khác hơn! Vì hiện tại thấy nhiều site xài cái hình này rồi, nếu không muốn đụng hàng thì có thể chế biến lại nhìn cho nó độc đáo hơn