Chuyển về đầu trang web với jQuery

Đăng bởi Neo trong mục Hướng dẫn vào 25 tháng 8, 2010 | Comments
Xem Demo Tải về

Xây dựng một website tiện dụng và dễ dùng là việc không đơn giản, bạn phải suy nghĩ và làm rất nhiều việc. Trong đó một phần cần thiết là giúp người dùng dễ dàng trở về đầu trang (với website có nội dung dài). Với plugin autoScroll, bạn sẽ có thể tạo nhanh chức năng này với hiệu ứng đẹp mắt.

Mã nguồn của plugin khá ngắn, nếu thích tìm hiểu bạn có thể xem thêm tại trang chủ của plugin. Sau đây là cách sử dụng plugin trên website

Cách sử dụng

Trước tiên, bạn cần download jQuery và autoScroll plugin. Sau đó thêm vào trong thẻ <head> của trang web:

<!-- Thư viện jQuery -->
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<!-- AutoScroll -->
<script type="text/javascript" src="js/autoScroll.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $.autoScroll({
    scrollDuration: 2000,
    showDuration: 600,
    hideDuration: 300
  });
});​
</script;>

Mã CSS

.gp{
    background: #666 url(arrow_up.png) center center no-repeat;
    width: 32px;
    height: 32px;
    color: #fff;
    font-family: verdana;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    cursor: pointer;
    padding: 15px;
    margin: 5px;
}​

Plugin không yêu cầu gì về mã HTML. Bạn có thể tùy biến bằng cách chỉnh sửa lại background (trong đoạn mã CSS) theo ý của mình.

scroll, jquery

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter