Thứ năm, ngày 8 tháng 12 năm 2016

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

Ngày đăng: 27/4/2011, 16:14:43PM | Lượt xem: 2,575
Hot!

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.

Demo

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

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.