Loading post navigation ...
 
 

Pro page

4
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[FD's BlOg] - Mình đã có đăng 1 bài về thủ thuật tạo nút nhảy lên đầu trang, thủ thuật đó dùng các lệnh javascript đơn giản để thực hiện, bài viết này mình sẽ giới thiệu cho các bạn một thủ thuật khác mà mình tìm thấy trên mạng, đó là sử dụng jQuery.



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:
1. Đăng nhập blog
2. Vào bố cục
3. Vào chỉnh sửa code HTML
4. Thêm đoạn code CSS bên dưới vào trước dòng code ]]></b:skin>

#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;
}

5. Tiếp đó xuống phía dưới và thêm đoạn code bên dưới vào trước thẻ đóng </body>

<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.

6. Save template là xong.

Theo Blogger Trick

Chúc các bạn thành công.


Enter your mail address:

4

Admin

Làm sao thay bằng ảnh anh ơi

Hội Thánh Điểm Báo

không thay ảnh được bác

sky eiii

thanks! ^_^

Chíp Đẹp Zai

Anh Dũng ơi cho em hỏi
là dùng jQuery này như thế nào ạ ?
phải download nó về mới xài đc à anh ?
vì em muốn làm cái hiệu ứng này cho blog http://www.fandung.com/2011/05/plugin-lightbox-cho-blogspot-phan-1.html
cơ mà nó ko load đc >.< có cần phải tạo tài khoản rồi up ảnh lên nó sau đó lấy bandwitch ko anh ?
à cụ thể cho hỏi thì bandwitch image là gì rồi làm thế nào nữa ạ >.<

tks anh trước :D



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

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

Newer Posts Older Posts Home