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!
0 nhận xét:
Post a Comment