JQuery là 1 thư viện JavaScript có nhiều chức năng, nó hỗ trợ việc lập trình web trở nên đơn giản, tạo ra nhiều hiệu ứng đẹp mắt cho website. JQuery hỗ trợ việc rút gọn code javascript, nó tạo ra những hàm, thủ tục sẵn có để lập trình viên không cần phải tự viết quá nhiều dòng lệnh phức tạp. Nhờ Jquey ta có thể xây dựng các hiệu ứng đẹp mắt cho website mà không tốn quá nhiều công sức cho việc lập trình.
Trong bài viết này tôi sẽ giới thiệu đến các bạn cách tạo 1 nút chuyển lên đầu trang với hiệu ứng mượt mà đẹp mắt cho website của bạn.
Trước hết phần HTML hiển thị cơ bản của nút này là 1 link được đặt trong thẻ <a></a>
<a class='toTop' href='#toTop' title='Lên trên'></a>
Thẻ <a> này ta đặt thuộc tính lớp là "toTop", để thiết lập thuộc tính css.
Trong phần CSS ta đặt các thuộc tính như sau:
/* Croll to top */
.toTop
{
width: 46px; /* Chiều rộng của nút */
height: 46px;
display: none;
position: fixed;
background: url(https://sites.google.com/site/nvnhan2910/images/toTop.png) 0 0 no-repeat; /* đặt ảnh nền cho nút (là 1 cái hình mũi tên lên chẳng hạn) */
cursor: pointer;
top: 70%;
right: 10px;
opacity: 0.5; /* độ mờ của nút khi chưa di chuột vào */
-ms-filter: "alpha(opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
z-index: 999;
}
.toTop:hover, .toTop:focus
{
transition: 0.2s; /* Tạo độ trễ bằng css3 */
-moz-transition: 0.2s;
-webkit-transition: 0.2s;
opacity: 1; /* Hiển thị hoàn toàn khi di chuột lên */
-ms-filter: "alpha(opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
}
Còn đây là phần để tạo hiệu ứng cho nút trượt - đó chính là sử dụng JavaScript cùng với JQuery. Bạn nên đặt phần này vào phần header của trang web:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script> <!-- Khai báo địa chỉ của thư viện JQuery -->
<script type='text/javascript'>
// Java scroll to top
$(function(){
$.fn.scrollToTop = function(){
$(this).hide().removeAttr("href"); // Xóa thuộc tính "href" trong phần HTML
if($(window).scrollTop()!="0"){ $(this).fadeIn("slow") }
var scrollDiv=$(this);
$(window).scroll(function(){ // Sự kiện trượt trang web
if ($(window).width() < 1100) {
$(".toTop").hide();
return;
}
if ($(document).scrollTop() < $(window).height()) {
$(".toTop").fadeOut("slow"); // ẩn nút
} else {
$(".toTop").fadeIn("slow"); // Hiện nút
}
});
$(this).click(function(){ // Sự kiện click nút
$("html, body").animate({scrollTop:0}, "slow") // Tạo hiệu ứng chuyển mượt
})
}
});
$(function() { $(".toTop").scrollToTop(); });
// Khi resize cửa sổ trình duyệt
$(window).resize(function () {
if ($(window).width() < 1100) {
$(".toTop").hide();
return;
}
});
</script>
Kết quả tạo ra giống như trang web này đang sử dụng
Chúc bạn thành công!
