Tin tức

Thiết kế web - cuộn trang (scroll) mượt mà với jquery

03/04/2013

Thiết kế web luôn đòi hỏi sự tinh tế trong từng click. Ngày nay, với sự phát triển không ngừng của công nghệ và kỹ thuật, đường mạng cũng ngày một cải tiến, cấu hình máy cao hơn xưa rất nhiều, thì người dùng không chỉ quan tâm tới thông tin, mà còn quan tâm tới giao diện, chức năng, độ mượt... của chúng. Website của bạn sẽ được đánh giá cao hơn nếu nó tiện ích và nuột nà với người sử dụng, thậm chí chỉ cần nhỏ nhặt như chức năng cuộn trang (scroll) mượt mà hơn. Với JQuery, bạn có thể dễ dàng cuộn trang một cách vô cùng mượt mà chỉ với vài dòng code đơn giản.

Cùng xem đoạn code JQuery dưới đây:

function goTo(obj) {
	$('html,body').animate({
		scrollTop: $(obj).offset().top	
	}, 1000);
}
$(document).ready(function(e) {
    $('#top').click(function(){
		goTo('#bot');
		return false;	
	});
	$('#bot').click(function(){
		goTo('#top');
		return false;	
	});
});

Trong nội dung web, ta cần đặt hai link có id tương ứng là #bot và #top như trong đoạn code trên. Xem chi tiết hơn tại video: Smooth Scolling

ESVN Training