Hướng dẫn làm nút Roll Top cho website đơn giản bằng jquery

by 4:08:00 PM 0 nhận xét
Nút Roll Top hay còn gọi là nút "Lên đầu trang" dùng để di chuyển nhanh lên đầu trang web mà không cần dùng chuột kéo RollBar. Website của bạn đã có nút này chưa? Nếu chưa có thì hãy cùng Beetiny Blog thực hiện thêm nút này chỉ với 3 bước nhé.


Bước 1: Thêm file thư viện jquery vào website của bạn (Gắn trước thẻ đóng </head>), bạn có thể dùng thư viện jquery trực tuyến của google:

<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
Thêm đoạn script dưới đây bên dưới :
<script type="text/javascript">

    $(function() {
        $(window).scroll(function() {

            if($(this).scrollTop() != 0) {

                $('#toTop').fadeIn();   

            } else {

                $('#toTop').fadeOut();
            }

        });
        $('#toTop').click(function() {

            $('body,html').animate({scrollTop:0},800);
        });   

    });

    </script>
Chú ý: đoạn script trên phải nằm dưới link file thư viện jquery.

Bước 2: Viết style cho nút Roll Top, bạn chèn trên thẻ </head> hoặc add vào file css của bạn đoạn css sau:

<style type="text/css">

    #toTop{

        border:1px solid #ccc;

            background:#f7f7f7;

            text-align:center;

            padding:18px;

            border-radius:5px;

            position:fixed; /* this is the magic */

            bottom:10px; /* together with this to put the div at the bottom*/

            right:10px;

            cursor:pointer;

            display:none;

            color:#333;

            font-size:11px;

    }

    #toTop:before{

        content:"";

        position:Absolute;

        width:0;

        height:0;

        border:11px solid transparent;

        border-bottom:11px solid #099;

        left:7px;

        top:-4px;

    }

    #toTop:after{

        content:"";

        position:Absolute;

        width:10px;

        height:12px;

        background-color:#099;

        left:13px;

        top:18px;
    }

    </style>
Bước 3: Chèn nút Roll Top vào website, bước này rất đơn giản chép thẻ div bên dưới vào vị trí bất kì trên website của bạn, nên nhớ là nằm trong thẻ <body> nhé:
<div id="toTop"></div>
Vậy là xong, bây giờ hãy chạy thử để thấy kết quả!

Chúc các bạn thành công!
Thảo luận

0 nhận xét:

Post a Comment