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:
Thêm đoạn code CSS bên dưới vào:
Code:
#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;
}☼Sau đó thêm đoạn code sau vào head:
Code:
<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.
Save template là xong.
Theo Blogger Trick, Fandung
Chúc các bạn thành công.
