backtotop jquery Scroll to top using JQuery for blog, website.

Một trang web quá nhiều nội dung khiến thanh cuộn dọc trở nên ngắn. Thật phiền toái mỗi khi kéo nó trở về đầu trang. Để khắc phục nó mình sẽ hướng dẫn các bạn tạo ra một link Back to Top (scroll to top) với một chút hiệu ứng của JQuery.


Xem demo của Agyuku site: scroll to top
Trước hết để sử dụng JQuery, bạn hãy chèn liên kết phía dưới vào sau thẻ <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
Đầu tiên, tạo một thẻ div trong thẻ <body> </body> - nơi hiển thị "Back to Top" sau này.
<div id="div-toTop">Back to Top</div>
Tiếp theo hãy thêm style cho div-toTop sau thẻ <style>
#div-toTop {
        width:100px;
        border:1px solid #ccc;
        background:#f7f7f7;
        text-align:center;
        padding:5px;
        position:fixed; /* không thay đổi dòng này */
        bottom:10px; /* vị trí của div-toTop */
        right:10px;
        cursor:pointer;
        display:none;  /* không thay đổi dòng này */
        color:#333;
        font-family:verdana;
        font-size:11px;
}
Cuối cùng thêm vào hiệu ứng JQuery cho liên kết vừa tạo trong thẻ <body> </body>

JQuery chỉ làm việc trên các trình duyệt thế hệ mới FF v3.*, IE7 ..Để đoạn code chạy tốt trên IE7 bổ sung thêm vào phần đầu thẻ sau
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Thật dễ dàng đúng hok? Hãy nhanh tay tạo cho mình một "Back to Top" nhé. Bạn có thể thay text bằng các button (nút) cho sinh động hen.