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.