Cấp bậc tác giả:

HTML

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

Được viết bởi webmaster ngày 13/08/2013 lúc 05:26 PM
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.
  • 0
  • 1285
Tải tệp tin: Click ở đây

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


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.

autoscroll.jpg

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 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.

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML