Animated scroll to top jQuery Effects

Lục Đức Thành

Animated scroll to top là hiệu ứng khá phổ biến và hữu ích trên các trang web có chiều dài lớn. Ở bất kỳ vị trí nào, người dùng cũng có thể cuộn lên phía trên cùng của trang web bằng cách click lên nút “Back to top” thường nằm ở phía dưới bên phải trang web. Hiệu ứng rất êm, mượt, tạo cảm giác dễ chịu.

Đây là một hiệu ứng khá đơn giản mà chúng ta có thể xây dựng bằng jQuery và một chút CSS. Nào, hãy cùng MyLop.BanMai.Info tìm hiểu cách làm nhé.

Animated scroll to top jQuery Effects

Animated scroll to top jQuery Effects (Ảnh: enfew.com)

Animated scroll to top jQuery Effects (Ảnh: enfew.com)

View Demo   Download Files

Bước 1: Xây dựng nút Back to top bằng hình ảnh trong HTML

Bạn chèn đoạn code sau vào bất kỳ vị trí nào thẻ <body>, tuy nhiên tốt nhất nên chèn vào vị trí cuối cùng của trang trước thẻ đóng </body>:

HTML Code:
1
2
3

<p id="back-to-top">
	<a href="#"><img src="arrow-up.png"></a>
</p>

Thuộc tính id của thẻ <p> dùng để chút nữa ta điều khiển bằng jQuery. Các bạn hãy ghi nhớ thông tin này.

Bước 2: Tạo style cho nút Back to top bằng CSS

Chèn tiếp các đoạn code CSS sau vào thẻ <style> của trang web hoặc vào một file .css riêng:

CSS Code:
1
2
3
4
5
6
7
8
9
10
11
12
13

#back-to-top {
	position: fixed;
	right: 30px;
	bottom: 60px;
	z-index: 9999;
}
#back-to-top a {
	text-decoration: none;
}
#back-to-top a img {
	width: 40px;
	height: auto;
}

Thuộc tính position: fixed; là thuộc tính quan trọng nhất để biến một phần tử thành Layer để ta có thể đặt ở bất kỳ vị trí nào mong muốn trên trang web. Thuộc tính right: 30px; và bottom: 60px; dùng để định vị nút Back to top cách cạnh phải và cạnh dưới màn hình trình duyệt một khoảng 30 và 60px.

Thuộc tính width, height qui định kích thước của bức ảnh dùng làm nút.

Vậy là xong phần HTML và CSS, giờ ta chuyển sang bước tiếp theo

Bước 3: Sử dụng jQuery tạo hiệu ứng Animated scroll to top

Liên kết tới thư viện jQuery trong phần <head> của HTML:

HTML Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Hoặc sử dụng jQuery trên host của bạn:

HTML Code:
<script src="path/jquery.min.js"></script>

Tiếp theo, chèn đoạn code JavaScript sau vào phía dưới, nhớ đặt trong cặp thẻ <script></script>:

JavaScript Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

jQuery(document).ready(function ($) {
	if ($(window).scrollTop() > 200) {
            	$('#back-to-top').fadeIn();
        } else {
            	$('#back-to-top').fadeOut();
        }
 
	$(window).scroll(function () {
	        if ($(this).scrollTop() > 200) {
			$('#back-to-top').fadeIn();
	        } else {
	            	$('#back-to-top').fadeOut();
	        }
	});
 
	$('#back-to-top').click(function () {
	        $("html, body").animate({
	            	scrollTop: 0
	        }, 600);
	        return false;
	});
});

Các bạn để ý những chỗ #back-to-top, nó chính là id của thẻ <p> dùng để chứa nội dung của nút được điều khiển bằng jQuery. Trong phần này ta sử dụng một số hàm jQuery như fadeIn(); fadeOut() và animate();. Đây đều là những hàm đơn giản, khá dễ hiểu nhưng rất hiệu quả.

Xong rồi đấy, hãy tận hưởng thành quả nhé các bạn:

View Demo   Download Files

Bạn có thể tạo nút Back to top mà không cần dùng đến file ảnh!

Bonus: Tạo nút Back to top hoàn toàn bằng CSS

Trong phần này MyLop.BanMai.Info sẽ hướng dẫn bạn cách tạo nút Back to top hình tròn đẹp mắt bằng việc sử dụng Font Awesome. Để biết cách sử dụng Font Awesome, mời bạn đọc bài viết Hướng dẫn sử dụng Font Awesome chèn vector icon vào web

Chèn thêm đoạn code sau trong phần <head>:

HTML Code:
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

Nhớ sửa đường dẫn tới file font-awesome.min.css mà bạn đã tải từ Font Awesome về cho chính xác. Hoặc bạn cũng có thể sử dụng CDN Version mà không cần tải Font Awesome về máy:

CSS Code:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Bạn sửa đoạn code HTML ở Bước 1 thành:

HTML Code:
1
2
3

<p id="back-to-top">
	<a href="#"><i class="fa fa-angle-up"></i></a>
</p>

Chúng ta sử dụng class fa-angle-up của Font Awesome để chèn icon mũi tên hướng lên trên. Xem thêm về cách sử dụng các icon tương tự tại đây

Cuối cùng, sửa code CSS ở Bước 2 thành:

CSS Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#back-to-top a {
	display: block;
	background: #00ac97;
	text-decoration: none;
	border-radius: 500px; 
}
#back-to-top .fa {
	width: 40px;
	height: 40px;
	display: block;
	margin-bottom: 7px;
	font-size: 2em;
	line-height: 35px;
	color: #FFF;
	text-align: center;
	font-weight: 500;
}

Bạn có biết tại sao lại có thuộc tính border-radius: 500px; không? Hãy tự khám phá điều bí ẩn này nhé!

Vậy là xong, xem kết quả nào:

View Demo   Download Files

Một số từ khóa để tìm kiếm:

– animated scroll to top, animated scroll to top jquery
– scroll to top, scroll to top jquery
– animated back to top, animated back to top jquery
– smooth scroll

Cheers,

The following two tabs change content below.
My Twitter profileMy Facebook profileMy Google+ profileMy YouTube channel

Lục Đức Thành

Giáo viên at FPT Arena
Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Các bài viết tương tự:

  1. jQuery lockfixed, đóng đinh phần tử web khi scroll
  2. JQuery Advanced News Ticker, tạo khối cuộn tin tự động
  3. News Ticker, tạo khối cuộn tin tự động bằng jQuery
  4. Tạo Responsive Menu cho các trang web bằng SmartMenus
  5. Hướng dẫn tạo Sticky và Collapse Header bằng JS, CSS
  6. Image Map Rollover Effect Tutorial with Dreamweaver, CSS3 and jQuery
  7. Hiệu ứng dập dềnh cho chữ
  8. CSS Notification Boxes – Tạo các hộp thông báo đẹp mắt bằng CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*
Website