Tab Menu

Tạo nút Back to Top với JQuery

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.

Hiện có 1 comments :

Hai Le

Cảm ơn bạn đã chia sẻ thông tin !
......................................
LAPTOP ĐẠI DƯƠNG
118/17 Trần Quang Diệu, P.14, Q.3, HCM Hotline: 0906.112.812 - 0909730124 (A MINH)
Click xem chi tiết:
laptop xách tay giá rẻ tphcm hoặc laptop xach tay gia re tphcm

Post a Comment

Bạn có thể tự do cho ý kiến, thảo luận về bài viết này nhưng phải theo những điều khoản sau:
- Phải nghiêm túc, không dung tục, không spam.
- Nội dung phải liên quan đến bài viết.
- Không mang tính chất chính trị...
- Hạn chế sử dụng Ẩn danh, hãy dùng Tên/URL để thay thế.
Lưu ý : Có thể sử dụng tag HTML cơ bản trong comment: br, b, i, u, a href= ...

:)
:(
;)
:D
=))
:-/
:x
I-)
@-)
=D:
:-q
:-w
[-X
B-)
:((
:-B
:-h
:x(
:-*
~O)
@};-

About

RSS
Coming soon... :))