Jquery

Tạo nút Back to top với Jquery

Trong bài viết này tôi sẽ giúp các bạn làm một hiệu ứng Jquery đơn giản với nút Back to top. Với những trang web có chiều cao lớn thì một nút bấm “Back to Top” giúp người đọc tiết kiệm chút thời gian và sức khỏe khi đỡ phải kéo lên trên cùng của trang. Chúng ta cùng bắt đầu

Các bạn có thể xem trước demo tại đây

Hãy thêm đoạn code này vào Header của bạn

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
     <script type="text/javascript">
        $(document).ready(function() {
            $('#main-contain').append('<div id="top">Back to Top</div>');
           $(window).scroll(function() {
            if($(window).scrollTop() != 0) {
                $('#top').fadeIn();
            } else {
                $('#top').fadeOut();
            }
           });
           $('#top').click(function() {
            $('html, body').animate({scrollTop:0},500);
           });
        });
     </script>

Trong này rôi sử dụng một phương thức của jquery là scrollTop, phương thức này giúp tôi xác định bạn đang ở đâu trên trang web của tôi và có cần thiết để hiện nút back-to-top ra không. Chẳng hạn nếu bạn đang ở trên cùng, với giá trị là bằng 0, thì tôi không cần hiện nút back-top-top ra, còn nếu bạn đang ở giữa trang web, giá trị là 1500 thì nút back-to-top sẽ hiện ra.

Ở trên tôi dùng hàm if, với ý nghĩa là: “Nếu giá trị không phải bằng 0 thi sẽ hiện nút back-to-top ra và ngược lại”

1
2
3
4
if($(window).scrollTop() != 0)
$('#top').fadeIn();}
else
{$('#top').fadeOut();}

Sau đó, tôi dùng một đoạn code tương tác lên lên hình ảnh, giúp đưa người đọc lên đầu trang.

1
2
3
$('#top').click(function() {
            $('html, body').animate({scrollTop:0},500);
           });

Đoạn code này có ý nghĩa là sẽ đưa bạn về vị trí 0 ( tức là vị trí đầu trang) trong thời gian nửa giây (với 500 là thời gian tương ứng trong nửa giây)

Có 1 vấn đề nữa chúng ta cần quan tâm. Đó là nếu người dùng sử dụng trình duyệt web có hỗ trợ Javascript thì không sao. Tuy nhiên nếu họ không được hỗ trợ thì làm cách nào? Nếu xuất hiện cái hình ảnh bên góc phải mà nó chẳng có cái tác dụng dì thì rất là kì. Do đó tôi sử dụng thêm 1 khái niệm trong thiết kế web là :Progressive Enhancement

1
2
$(document).ready(function() {
            $('#main-contain').append('<div id="top">Back to Top</div>');

Với main-contain là phần div chứa nội dung của bài viết. Các bạn có thể thay main-contain bằng phần div mà bạn muốn.
Sau đó hãy style theo ý các bạn thích. Với cái demo mà tôi giởi thiệu trên kia, cách style là:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
* { margin: 0; padding: 0;}
        p {
            margin: 30px 30px;
        }
        h1 {
            margin: 10px 10px;
            text-decoration: underline;
            text-align: center;
            color: blue;
            }
        #main-contain {
            width: 700px;
            margin: 0 auto;
            border: black 1px solid;
        }
        #top {
            width: 60px; height: 60px;
            position: fixed; bottom: 50px; right: 20px;
            text-indent: -99999px;
            cursor: pointer;
            background: url(top.png) no-repeat 0 0;
        }

Chúc các bạn thành công

Nguồn : http://josnguyenblog.com

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s