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

Trang chủ » jQuery » Thu Thuat Blog » Thủ thuật Blogger » Bạn đang xem:

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

Thứ Ba, 19 tháng 5, 2009

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

Copy bài viết: