Tạo nút Back to Top với hiệu ứng từ jQuery

/
back to top button with jquery
Hôm nay tình cờ ghé thăm Hư Trúc Blog thì thấy một cái Back to Top Button khá đẹp, sử dụng hiệu ứng trượt từ jQuery, và đặc biệt là nó ẩn/hiện khi cần thiết. Với những trang web có phần nội dung khá dài thì nút Back to Top này giúp người đọc tiết kiệm thời gian khi phải rê chuột lên trên cùng của trang. Đem về áp dụng thử trên Blogspot, thế là có bài đăng mới.



Chèn đoạn code sau phía trên </body> trong template:
<style type='text/css'>
#bttop{border:1px solid #4adcff;background:#24bde2;text-align:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>

Hope you like it !
Add a Comment

49 comments

Em thì vẫn thích cái "back to top" như của em với của bác. Giản dị mà hiệu quả, thế là được.

2/17/2011 comment-delete

Nhưng mà cái button này code nó ngắn gọn đến không ngờ (3 dòng b-( )

Đang định thế vào cái code cũ để blog load nhanh hơn =))

2/17/2011 comment-delete

Ngắn gọn mà hiệu quả b-)
Em áp dụng luôn thay cho cái Text "Back To Top" cùi mía hồi trước dùng .
Thanks for sharing !

2/17/2011 comment-delete

Hi LinkFoci, cái domain .net của bác bị gì thế :-o

2/17/2011 comment-delete

@Noct : Hix , rầu quá bác ơi , em dùng DNS bên PAvietnam nhưng mấy hôm trc bên đó nói có lỗi gì đấy , sau đó họ nói fix ok rồi , vậy mà sau khi setup xong chờ dài cổ vẫn không vào được Blog , contact với họ thì gần tuần nay chưa thấy hồi âm .
Nản quá quay lại cái domain của Blogger luôn .

2/17/2011 comment-delete

Cái này hay nhỉ, có thể áp dụng cho blog của mình. Thanks.

2/17/2011 comment-delete

Hê cũng được đấy, để tham khảo. Tớ có cái này đơn giản đây. Mọi người tham khảo nhé

Mời bác Noct qua tham gia "Contest" nho nhỏ này cho vui :
http://linkfoci.blogspot.com/2011/02/happy-birthday-to-me.html
^^

2/19/2011 comment-delete

Back to top em làm cho vui mắt chứ toàn Home + End cho nhanh

2/19/2011 comment-delete

Thanks for Sharing bác nhé , mời bác ghé thăm blog em tìm phần mềm có bản quyền miễn phí nhé

2/19/2011 comment-delete

Nhờ bác Duy nói mới biết là 2 nút đó xài được trên FF =))

2/19/2011 comment-delete

Liên kết nhé bạn

2/19/2011 comment-delete

Bác sửa lỗi được cái tiện ích Facebook của tớ ko

2/19/2011 comment-delete

Cậu đi hỏi Mark Zuckerberg ấy chứ tôi cũng chịu thua b-(

2/19/2011 comment-delete

@Minh Quân : em nghĩ đó là do mạng tại VN thôi chứ đâu phải lỗi tại Facebook ^^

2/20/2011 comment-delete

Chúc mừng bác Noct đã "trúng thưởng" trong "Small Contest" . Nếu bác có hứng thú thì reply lại em nhé :D

2/20/2011 comment-delete

Mình có bài viết mới về thủ thuật này. nếu bạn tò mò hảy qua góp ý nhé.Mình có đọc nội quy comment rồi nhưng mình chỉ góp ý :
http://www.kesachnho.tk/2011/04/tao-nut-len-au-trang-voi-hieu-ung-truot.html

Hi, Noct
mình chỉ muốn nó hiện ra ở trong bài viết như DEMO thì phải làm sao! ^^

5/02/2011 comment-delete

Hehe! làm đc òi, thêm cái b:if vào code là đc. Cảm ơn bạn nha! cái này rất tuyệt!

5/02/2011 comment-delete

Mình cũng mới tìm đc cái hiệu ứng lên xuống mới, cũng tuyệt lắm, bạn xem thử

5/07/2011 comment-delete

Cái này rất hay, nhưng sẽ bị xung đột với cái này liền
http://noct-land.blogspot.com/2011/03/tao-tab-noi-dung-on-gian-voi-jquery.html

Chỉ đơn giản là xóa bớt 1 link jquery.js đi và đặt cái còn lại ở trên cùng.

5/08/2011 comment-delete

Mình làm theo bạn rồi, ko thấy xung đột nhưng lại chả hiện ra cái gì cả?
Mình xóa dòng script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script có đúng ko? Có cần thêm đoạn code gì vào nữa ko

Đã test lại và thấy hoạt động rất trơn tru, trong demo này thì mình đặt duy nhất 1 link jquery.js ngay bên dưới </head>

5/08/2011 comment-delete

anh ơi thay chữ back to top thành hình như ở blog của bạn này được ko :D http://kenvintqd.blogspot.com/#

6/01/2011 comment-delete

Hu hu,cài vào rồi lại gỡ ra bởi vì nó không chạy được cái slider,mình gà quá nên bó tay luôn,kiếm đỡ cái nào dùng đã,lăn chuột hoài chết mất chuột thôi.

Nhận xét này đã bị quản trị viên blog xóa.

8/11/2011 comment-delete

Đừng có xóa thông tin tác giả trong template của tôi rồi vào đây hỏi này nọ nhé cậu vuongsungdong, có da mặt không vậy ?

8/11/2011 comment-delete

mình để quảng cáo của blog bạn trên blog mình rồi nha.đừng nói gì hết nữa.

8/13/2011 comment-delete

Thanks bác nhiều lắm

Nhân tiên đây bác có thể share cho mọi người cái footer đẹp của bác không ?

8/19/2011 comment-delete

Nhận xét này đã bị quản trị viên blog xóa.

10/23/2011 comment-delete

@A3FCsửa thông tin tác giả trong template của tôi lại còn dày mặt vào đây hỏi à ?

10/23/2011 comment-delete

@vuongsungdongĐọc comment này thấy độ "vãi" của bạn quá, Noct phải cảm ơn bạn à b-(

10/24/2011 comment-delete

Anh Noct ơi! Sao em đưa code vào tem thì cái slide nó bị đứng luôn vậy (không dịnh chuyển được =.=!)

Anh có cách nào khắc phục không? Hiện tại em đã Delete bỏ Code và giờ thì Slide vẫn chạy bình thường.

Thanks anh trước. Em đang sử dụng Template Gamenow!

11/05/2011 comment-delete

@Kelvin cái này đã nhắc mãi ở bài jquery rồi, trong template chỉ nên có duy nhất 1 liên kết tới jquery, trong trường hợp này thì slide vốn đã dùng jquery nên ở nút back to top phải xóa jquery đi.

11/05/2011 comment-delete

mình sẽ thêm code như nào để có thể thêm 1 thẻ hình ảnh thay thế chữ Back TO TOP

tks/

12/08/2011 comment-delete

chắc là mình làm đc rồi! hehe,
nút back to top của mình là hình con pig xanh, trông hay phết.

12/08/2011 comment-delete

Mình làm được rồi nhưng nút Back To Top chỉ hiện ở trang chủ. Mình muốn nó hoạt động được ở tất cả các trang thì chèn nó ở đâu vậy Noct?

1/16/2012 comment-delete

@Lâm Hoà Văn Thủ thuật này không giới hạn ở trang chủ bạn à

1/16/2012 comment-delete

@Noct

Nhưng nó chỉ hiện ngoài trang chủ thôi, blog mình nè lieutu.blogspot.com

1/16/2012 comment-delete

Làm sao để nó đứng ở một chỗ chứ không cuộn theo trang vậy anh Noct?

7/03/2012 comment-delete

thay position:fixed thành position:absolute

7/05/2012 comment-delete

ý em là để nó luôn hiện cuối trang chứ không cần ẩn hiện!!b-)

7/05/2012 comment-delete

bác Noct ơi, cái Back To Top này nó xung đột với Slider của Em MấT Rồi b-( . Bác Có Cách Nào Fix lại giúp em ko .
Website e đây: hoanghuyphatgl.com

Tiện quá! Cám ơn noct.

Bác giúp em làm nó không ẩn hiện nữa với.
Em muốn nó hiện luôn! :)

9/06/2012 comment-delete

bạn ơi,mình không muốn khi rê chuột tới nó đổi màu thì sửa kiểu gì ?

10/30/2012 comment-delete

Đã test rất chuẩn

11/12/2012 comment-delete

Admin oi! giúp mình với. Có thể giúp mình thay đổi Templates không? Mình không biết làm thế nào để Add nó vào blog cả. Mình sử dụng Google Chomre 21. Giúp mình nhé.

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License