Diễn Đàn Chia Sẻ Kiến Thức OnlineLog in

Kết nối để thành công

Chào mừng bạn đến với diễn đàn DNTG - Diễn Đàn Chia Sẻ Kiến Thức
Địa chỉ hiện tại của diễn đàn là dntg.forumotion.com
Vui lòng gửi cho chúng tôi một email về giang@dntg.vn nếu bạn có bất kỳ góp ý nào về diễn đàn và nhận 10 điểm tín nhiệm
Bạn có nguyện vọng đóng góp vào diễn đàn? Gửi yêu cầu về giang@dntg.vn và tham gia với chúng tôi ngay.
LIÊN HỆ QUẢNG CÁO giang@dntg.vn

Share

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

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

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

more_horiz
Thêm đoạn CSS vào đâu vậy bạn? còn head là ở đâu :010:

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

more_horiz
[You must be registered and logged in to see this link.] wrote:
Thêm đoạn CSS vào đâu vậy bạn?

Display -> Pictures and Colors -> Colors -> CSS Stylesheet
[You must be registered and logged in to see this link.] wrote:
head????


Display -> Templates -> Quản Lý Tổng Thể -> overall_header
:done:

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

more_horiz
Nhưng em đâu thấy mượt gì đâu

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

more_horiz
Permissions in this forum:
You cannot reply to topics in this forum