Cách tạo nút trở về đầu trang (back to top) cho mọi website

 

Nút trở về đầu trang hay Back to top là một phần cơ bản của hầu hết website. Nó giúp cho người dùng dễ dàng trở về phần đầu của trang chỉ bằng một click mà không phải kéo thanh trượt hoặc vuốt màn hình mỏi tay. Nếu một bài viết dài và có nhiều comment, tổng trang sẽ rất dài và nếu trên di động bạn sẽ phải vuốt nhiều lần để có thể trở về đầu trang. Lúc đó back to top quả là có ích, chỉ cần một nhấp.
Trong bài viết này mình sẽ chia sẻ với các bạn 2 cách tạo back to top, một cách siêu đơn giản không có hiệu ứng và một cách có hiệu ứng trượt, có thể tùy chỉnh theo ý thích. Các cách này chỉ sử dụng html hoặc javascript nên có thể sử dụng cho mọi loại mã nguồn: blogspot, wordpress, xenforo,…

1Cách tạo back to top đơn giản.

Bạn chỉ cần dán đoạn mã ngắn ngũn này vào phần cuối của trang web, thường là phần footer.

<a href='#' title="Back to top">&#710;</a>
Thực ra đây chỉ là một liên kết về đầu trang. Hoàn toàn không có hiệu ứng gì cả. Nó dành cho những ai thích sự đơn giản, giúp tối giản code, load trang nhanh. Bạn có thể “trang trí” sơ sơ cho nút này ví dụ:

<div style="text-align:center; font-size:30px;"><a href='#' title="Back to top">&#710;</a></div>
Các bạn chú ý ký tự &#710; chính là dấu mũi tên lên nut-back-to-top. Bạn có thể google với từ khóa “Ký tự đặc biệt html” để xem thêm các ký tự khác. Hoặc bạn cũng có thể thay nó bằng dòng “Về đầu trang” chẳng hạn.

2Cách tạo nút back to top với hiệu ứng trượt.

Để chuyên nghiệp hơn, tạo cảm giác thích thú cho người dùng hơn, chúng ta nên tạo nút back to top với hiệu ứng di chuyển. Cách làm như sau.
Các bạn copy đoạn code sau dán vào phần đầu trang, giữa thẻ <head></head>

<!-- import icon font awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Import thư viện JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
// kéo xuống khoảng cách 500px thì xuất hiện nút Top-up
var offset = 500;
// thời gian di trượt 0.75s ( 1000 = 1s )
var duration = 750;
$(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > offset)
$('#top-up').fadeIn(duration);else
$('#top-up').fadeOut(duration);
});
$('#top-up').click(function () {
$('body,html').animate({scrollTop: 0}, duration);
});
});
</script>
<div title="Về đầu trang" onmouseover="this.style.color='#590059'" onmouseout="this.style.color='#004993'" id="top-up">
<i class="fa fa-caret-square-o-up"></i></div>
<style>
#top-up {
background:none;
font-size: 3em;
text-shadow:0px 0px 5px #c0c0c0;
cursor: pointer;
position: fixed;
z-index: 9999;
color:#004993;
bottom: 20px;
right: 15px;
display: none;
}
</style>

Chỉ vậy thôi là các bạn đã có nút back to top như hình dưới.

nut-back-to-top-2

Tuy nhiên, nếu muốn “tạo sự khác biệt” cho website bạn cần chú ý một số chỗ để có thể tùy chỉnh theo ý thích:

var offset = 500: Kéo xuống 500px thì xuất hiện nút back to top.
var duration = 750: thời gian trượt 0.75 giây, 1000 = 1 giây
Đoạn CSS giữa thẻ <style></style> là dành cho bạn chế biến, mọi thứ như size, màu sắc, vị trí,…
Và một phần cực quan trọng để các bạn có thể thay đổi hình ảnh tùy thích là phần <i class=”fa fa-caret-square-o-up”></i>
Các bạn truy cập trang này để chọn biểu tượng mình thích và dán class của nó thay thế cho class fa-caret-square-o-up ở trên. Ví dụ để có biểu tượng máy bay như của vntopic.net, bạn sẽ dùng đoạn này: <i class="fa fa-space-shuttle fa-rotate-270"></i>

nut-back-to-top-vntopic
Ngoài ra, bạn có thể dùng hình ảnh bằng cách thay thế đoạn trên bằng link đến hình ảnh bạn muốn. Ví dụ: <img src="duong-dan-den-hinh-anh" width="60px" height="auto"></img>

Để tìm hiểu thêm về cách xài biểu tượng của font awesome, các bạn xem thêm bài này: http://vntopic.net/mot-so-phuong-phap-thay-the-photoshop-khi-thiet-ke-web-cho-nguoi-moi

Xin cảm ơn các bạn đã xem.


Xem thêm:
loading...

Like nếu bạn thấy hay, và nhớ chia sẻ cho bạn bè
 
Bình luận với tài khoản Facebook:

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *