Hi, Phòng khách!
Trang chủ
Đăng nhập
Công Cụ Tìm Kiếm

Lần hoạt động

| |
Tìm kiếm

  Tạo nút Back To Top nhanh bằng jQuery

Bài viết được duyệt bởi PuaruVN
Đăng ngày :30.07.2016 / 20:18[TOP]
Mr.Ice
KisDers
Active Member
♥♥♥♥♥♥♥
[DoanBacTam.Me - Soci]

Hướng dẫn tạo nhanh một nút Back To Top bằng jQuery kết hợp với CSS.
CSS tạo nút với hình có sẵn:
Mã Code Vina4u
.backtotop {
width: 50px;
height: 50px;
position: fixed;
right: 0;
bottom: 0;
margin-right: 10px;
margin-bottom: 10px;
background: transparent url(images/backtotop.png) center no-repeat;
cursor: pointer;
display: none;
}

JavaScript:
Mã Code Vina4u
$(document).ready(function() {
// Thêm nút Back to top vào thẻ body
$('body').append('<div class="backtotop"></div>');
// gán nút đó vào biến
var backtotop = $('.backtotop');
// sự kiện scroll khi cuộn
$(window).scroll(function() {
// nếu cửa sổ hiện tại không ở đầu trang thì hiện nút ra
if($(this).scrollTop() != 0) {
backtotop.fadeIn();
// ngược lại sẽ ẩn nút đi
} else {
backtotop.fadeOut();
}
});
// sự kiện click khi bấm vào nút
backtotop.click(function() {
// chuyển động đến đầu trang trong 0.5s
$('html, body').animate({scrollTop: 0}, 500);
});
});

Cám ơn các bạn !

Nguồn : Đinh Quốc Hân - tutviet.net
Đăng ngày :30.07.2016 / 20:45 #1
SaoPhaiXoan
SaoPhaiXoan
Active Member
♥♥♥♥
[Danh Hiệu]
Bình luận bài viết
Đăng Nhập để Bình luận và sử dụng đầy đủ tính năng Diễn Đàn
  Tổng số: 2 Bình luận

Chia sẻ bài viết
Đám Mây Từ Khóa
Bài Viết Cùng chuyên mục
Lọc theo tác giả
Xem chủ để ngoại tuyến (Offline)

Trong diễn đàn

Sắp xếp theo thứ tự từ trên xuống
BigTruyen.info - Kho Truyện Tranh Online Khổng lồ
Trang chủ