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 !
[Nguồn : zenplate.blogspot.com]

15 Nhận xét on "Tạo nút 'Scroll to Top' với jQuery"

Minh thành on 21 May 2009 at 20:13 said...

bạn có thể chia sẻ thủ thuật chỉ hiện tên bài đăng như blog bạn được hông

Ngankvn ® on 23 May 2009 at 13:27 said...

KHông có Demo cho xem à :) , Phải thích mới làm thử chớ :D

boyproDX on 23 May 2009 at 13:51 said...

@Ngankvn ® : Demo here :D . Ngân test thử nhé ^^!

Ngankvn ® on 23 May 2009 at 14:01 said...

Á à ... Đẹp :) , Nhưng mà chỉ như vậy thôi thì ko cần thiết phải dùng Jquery

Mình biết một Java Script có thế làm đc :

http://www.kryogenix.org/code/browser/smoothscroll/Xem đi :)

Ngankvn ® on 23 May 2009 at 14:04 said...

À mà BoyProDX có biết tại sao bây giờ cứ in đậm trong comments thì ko xuống hàng được nữa nhỉ ??? ( như cái comments ở trên của mình ấy )

Cậu giỏi tiếng anh thì thử Mail cho Google báo lỗi này xem :D , Biết đâu còn được thưởng nữa chớ :))

boyproDX on 23 May 2009 at 15:09 said...

@Ngankvn ® : Để xuống dòng khi in đậm thì cần thêm thẻ br/ , mà bên Ngân có bị ko ? Nếu ko thì chắc tại temp của mình oài :D

Ngankvn ® on 23 May 2009 at 15:23 said...

Ở đâu cũng bị cả !!!
Mà phần comments bây giờ chấp nhận thẻ br/ nữa sao ???

boyproDX on 23 May 2009 at 16:57 said...

@Ngankvn ® : Ừ, khung comment cho dùng một số thẻ HTML đơn giản mà. Nếu tất cả đều bị thì đành chịu vậy, dạo này nhân tài của Google xách gói đi mất rồi mà :| , nên Blogger có thể sẽ ít được nâng cấp hơn trước :(

7on7 on 2 June 2009 at 04:01 said...

bài viết rất bổ ích :)
Thanks for share.

Anonymous said...

hihi
haha Test

Anonymous said...

:))

♂..V!Ø|€† ♥ M¥ |_!ŋђ..♀ on 25 July 2009 at 13:08 said...

Thủ thuật khá cool, đặc biệt ko bị hư khi dùng với target="_blank" :D Thks bạn nhìu nhìu :D

Trần Phong on 29 October 2009 at 09:58 said...

Cái này hay đó nhưng anh chỉ cách mọi người tùy biến cho phù hợp với theme của blog mình đi !

Thay đổi màu và font chữ,....

Phạm Sơn Tuấn on 19 April 2010 at 13:49 said...

Mình mún thay nó bằng 1 nút thì như thế nào . Chèn tag img vào XML nó báo lỗi cậu à :(

hihi on 27 October 2010 at 09:42 said...

hic. cai nay ko chay duoc tren opera dau cac ban co the test thu

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3