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:
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:
Chúc các bạn thành công!
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:
Thêm đoạn script dưới đây bên dưới :
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js'></script>
Chú ý: đoạn script trên phải nằm dưới link file thư viện jquery.<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>
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:
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é:<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>
Vậy là xong, bây giờ hãy chạy thử để thấy kết quả!<div id="toTop"></div>
Chúc các bạn thành công!
