Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
du học hợp điểm
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi Phạm Hữu Dư, 24/10/13.

Lượt xem: 6,680

  1. Phạm Hữu Dư phamhuudu.com

    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/

    [​IMG]

    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 :D

    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 :D

    ...
    du học hợp điểm
    caphenhiepanh, b0yHN_96banbaonylong thích bài viết này.
  2. Looie

    Looie Thành viên cấp 2

    Áp dụng luôn cho diễn đàn đi bác :D
  3. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Diễn đàn có rồi còn gì, đơn giản!

    Còn cái này quá màu mè, chỉ chia sẻ cho ai cần thôi ;)
  4. caphenhiepanh

    caphenhiepanh Thành viên cấp 1

    vừa hay đang tìm , :D , thks admin nhé
  5. Long Trần Quốc

    Long Trần Quốc Thành viên cấp 1

    nếu có 2 nút thì có cần phải xóa đi ko anh hay chồng lên cái cũ vẫn được ạ
  6. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

  7. Long Trần Quốc

    Long Trần Quốc Thành viên cấp 1

    EM ko biết tại sao xóa 1 nút thì cái không cuộn chuột lên xuống trang được nữa anh =.=

Ủng hộ diễn đàn