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 trượt lên đầu trang cho wapsite của bạn ( Top-Up )

Bài viết được duyệt bởi PuaruVN
Đăng ngày :09.05.2016 / 05:45[TOP]
choiem1lan2
BN2002
Super Moderator
♥♥♥♥♥♥
[DZ]
Bài viết này chỉ mang tính chất chia sẻ cái hay tới các bạn, bạn nào biết rồi hay không muốn xem thì vui lòng không thể hiện thái độ Gato tại đây nhé.
Nguồn:
Vui lòng đăng nhập để thấy Links!

Bài share:
Vui lòng đăng nhập để thấy Links!

DEMO :
Vui lòng đăng nhập để thấy Links!

DOWNLOAD :
Vui lòng đăng nhập để thấy Links!

Chào các bạn!

Trong bài này mình sẽ hướng dẫn các bạn tạo nút "Top-Up "( hiểu là: nút trượt lên đầu trang ).
Trong hiện nay, thời đại phát triển thì điều này thường được các wapsite áp dụng rất nhiều, nó khá là tiện ích tạo cảm giác thoải mái dễ chịu cho khách khi truy cập wapsite bạn.
Để các bạn thấy rõ " Top-Up " như thế nào thì đây: chính là khi bạn đang xem bài viết này của Abroths khi lướt xuống gần cuối trang sẽ xuất hiện nút mũi tên ẩn hiện mờ đậm chứ? Chính là nó, các bạn đã thấy kích thích chưa? Bây giờ chúng ta đi vào vấn đề nhé:

* sẽ có 2 cách để tạo nút "Top-Up" là:
C1: Sử dụng HTML & Css thuần.
C2: sử dụng HTML + Css & JQuery.

Đối với C1:
Bạn đặt vào nơi thích hợp ( thường là cuối trang ) đoạn html sau:
PHP Code:
<?php
<a href="#" class="button">Lên đầu trang</a>
<
style>
.
button {
background#009688;
text-decorationnone;
border-left#00BCD4 inset 1px;
border-right#00BCD4 outset 1px;
padding3px;
text-aligncenter;
cursorpointer;
}
</
style>
?>

Xong C1, tuy cách này cực kì đơn giản nhưng nó lại tạo cảm giác đột ngột, thô không có hiệu ứng mượt mà, không tùy biến nên có thể khiến khách truy cập cảm thấy khó chịu và điều gì xảy ra chắc các bạn cũng biết
Đối với C2:
C2 sẽ có sự tham gia của JQuery, JQuery sẽ tạo nên hiệu ứng tùy biến thông minh & mượt mà, di chuyển mềm mại
với C2 này chắc chắn khách truy cập sẽ hai lòng với wapsite của bạn tup:
Bắt đầu:

Trước tiên các bạn phải import icon font awesome & JQuery đặt lên đầu wapsite ( header đó )
PHP Code:
<?php
<!-- 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>
?>

* Lưu Ý: nếu bạn đã nhập ( import ) thư viện JQuery & icon Font awesome rồi thì bỏ qua bước này nhé

Tiếp theo ta sử dụng JQuery để xử lý nút " Top-Up "
PHP Code:
<?php
<script>
// kéo xuống khoảng cách 600px thì xuất hiện nút Top-up
var offset 600;

// thời gian di trượt 0.95s ( 1000 = 1s )
var duration 950;
$(function(){
$(
window).scroll(function () {
if ($(
this).scrollTop() > offset) $('#top-up').fadeIn(duration);
else $(
'#top-up').fadeOut(duration);
});
$(
'#top-up').click(function () {
$(
'body,html').animate({scrollTop0}, duration);
});
});
</script>
<div id="top-up"><i class="fa fa-arrow-circle-o-up"></i></div>
<style>
#top-up {
background:none;
font-size: 3em;
cursor: pointer;
position: fixed;
z-index: 99999;// đè lên tất cả nôị dung đi qua nó
color: green;
bottom: 50px;
right: 25px;
display: none;
}
</style>
?>

* Hàm .scroll() có tác dụng thực hiện hàm bên trong nó khi ta scroll chuột
Dòng:
PHP Code:
<?php
$('body,html').animate({scrollTop0}
?>

{scrollTop: 0} tức là khi click nút Top-up thì sẽ di chuyển lên Top với khoảng cách là 0px ( lên trên tận cùng wapsite )

Đã chỉnh sửa. choiem1lan2 (09.05.2016 / 05:46) [1]
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ố: 1 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ủ