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>
6. Save template là xong.
☼ 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>
- 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;
}
- 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>
6. Save template là xong.
Nguồn: mothuthuat.com