Home » Thủ thuật blog
Tạo nút lên đầu trang với hiệu ứng từ jQuery
Thứ Ba, 19 tháng 5, 2009

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.

- Tiện ích Popular Posts - Bài xem nhiều với CSS3
- Mạng xã hội theo dõi với hiệu ứng rê chuột cho blogspot
- Mudim - Thêm bộ gõ tiếng Việt cho blogspot
- Hiệu ứng màu chạy lấp lánh trong chữ cho blogspot
- Thủ thuật thêm "comment mới gần đây nhất" cho blogspot
- Template dịch vụ, công ty giới thiệu cho blogspot
- Thủ thuật tạo khung liên kết thanh cuộn cho blogspot
- Nút điều khiển lên xuống toàn trang cho blogspot
- Menu ngang co kèm hình ảnh bên cạnh rất đẹp
- Hiệu ứng Like page Facebook (FB), G+, twitter động cực đẹp cho Web, blogspot
- CSS3 với hiệu ứng hình ảnh động cực đẹp cho Web, blogspot
- Bài viết liên quan cho blogspot - Hiệu ứng ảnh thu nhỏ
Comments[ 0 ]
Đăng nhận xét