Thứ Hai, 14 tháng 11, 2011

Tạo Nút "Top Page" Bằng Jquery

™» CGC Blog «™ Khi viết Blog, chắc hẳn bạn sẽ có không ít bài chứa nội dung phong phú, đa dạng, khiến cho bài viết trở nên dài thêm ; khi đó, nút 'Scroll to Top' (Lên đầu trang) sẽ là một công cụ hiệu quả để giúp người đọc nhanh chóng di chuyển trên trang của bạn.Rất nhiều bạn chắc đã biết cách tạo nút 'Scroll to Top' bằng cách dùng đoạn code đơn giản như #top(0;0) . Nhưng với jQuery, công cụ này sẽ trở nên mượt mà hơn, chắc hẳn bạn sẽ thích thú. Đồng thời, công cụ này sẽ tự ẩn đi khi đã lên đầu trang, rất hay đúng không nào ! Chúng ta bắt đầu tạo :
1. Đăng nhập vào Blogger > Layout > Edit HTML (Không cần Mở rộng Mẫu tiện ích)
2. Thêm đoạn code bên dưới vào ngay trên thẻ </body>


<a href="#" id="toTop">^ Scroll to Top</a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
* Bring to you by Zen from http://zenplate.blogspot.com
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
* Do not delete these infomation
* Version: 1.0, 12/03/2009
-----------------------*/

$(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>

3. Thêm đoạn code bên dưới vào ngay trên thẻ ]]></b:skin>

/* to top */
#toTop { 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; }

4. Save lại template và thử nghiệm .

5. Nếu các bạn muốn chỉnh sửa cái nút top thì thay code phần 3 bằng code này:

/* to top */
#toTop { width:40px;height:40px;background:url(Link ảnh) no-repeat;border:0px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:5px;right:5px;cursor:pointer;
color:#666;text-decoration:none; }

Thay Link ảnh bằng ảnh bạn muốn, rồi chỉnh sửa widthheight cho phù hợp
Chúc các bạn thành công !

Nguồn : khanhduy89.blogspot.com
Copy : CGC Blog
Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!

0 Bình Luận:

Đăng nhận xét

Nội quy comments của CGC Forum :
1. Comments không được sử dụng lời lẽ thiếu văn hóa, ảnh hưởng xấu đến chính trị, tổ chức, cá nhân.
2. Không được sử dụng comments với mục đích spam.
Những comments làm trái quy định sẽ bị xóa...!
Xin cảm ơn các bạn đã đóng góp comments và tuân thủ nội quy của blog !
Notice by Admin

 
CGC Forum | Thủ Thuật © 2011 - 2012 by Tran Viet Duc
Top Page