Tạo nút 'Scroll to Top' với jQuery

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 nhé :

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 .
Hy vọng các bạn thích thủ thuật này. Chúc thành công !

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 width và height cho phù hợp
Nguồn: Blogtinhoc có chỉnh sửa NKD

Posted in: Thủ Thuật Blog