VIỆT FM
ChinhPhuc™️ hỗ trợ làm forum từ A~Z

Tạo nút lên đầu trang với hiệu ứng từ jQuery

Go down

bình thường Tạo nút lên đầu trang với hiệu ứng từ jQuery

Bài gửi by Eagle8x on Sun Nov 21, 2010 3:54 pm

Với việc dùng jquery thì sẽ tạo hiệu ứng đẹp mắt hơn so với dùng javascript, khi ta nhấn vào bottom nhảy lên đầu trang thì một hiệu ứng trượt sẽ được hiển thị, và trang web (blog) của bạn sẽ được trượt dần dần lên trên.
☼ Các bước thực hiện:

Thêm đoạn code CSS bên dưới vào:
Code:
#backtotop {
width:100px;
background:#F4FFBF;
border:1px solid #ccc;
text-align:center;
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
color:#666;
text-decoration:none;
}
☼Sau đó thêm đoạn code sau vào head:
Code:
<a href="#" id="backtotop">Lên đầu trang</a>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});



$(function() {

$("#toTop").scrollToTop();

});

</script>
- Bạn có thể thay thế dòng "Lên đầu trang" thành ảnh nếu bạn muốn.

Save template là xong.
nguồn win :D

Chữ kí thành viên Việt FM
[You must be registered and logged in to see this image.]
avatar
Eagle8x
Admin
Admin

Đồng Đồng : 16
Giới tính : Nam Posts : 1223
FM : 503499
Thanks : 157
ngày than gia : 26/07/2010
Age : 28
hoàn hảo

http://vietfm.forumvi.net

Về Đầu Trang Go down

Về Đầu Trang

- Similar topics

 
Permissions in this forum:
Bạn không có quyền trả lời bài viết