XtGem Forum catalog

CuDemVN.Wap.Sh

- GetSmile.Mobie.In - Diễn đàn chia sẻ Cú đêm Việt Nam
- AiChat.Wap.Sh - Diễn đàn Xtgem Việt Nam
- HamTruyen.Xtgem.Com - Blog Ham Truyện nơi hội tụ của những tín đồ mê truyện chữ
* Trang chủ >> WapMaster
Tìm Kiếm Thảo Luận
↓↓

Hướng dẫn tạo nút Back to TOP - lên đầu trang ẩn hiện mượt mà

Admin* RoSino18k *
* 08-03-2016
Chào các bạn! Trong thời buổi các thiết bị số phát triển nhanh chóng như hiện nay ắt hẳn bạn đã hơn một lần nhìn thấy nút Go Top trên các Wap/Web Site. Nút Go Top hay còn gọi là code back to top khiến site của bạn trở nên linh động hơn khi khách kéo xuống cuối/gần cuối trang có thể dễ dàng push lên header mà không phải phụ thuộc vào trình duyệt nữa! 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).


→demo: *http://abroths.xyz/demo/top_up.php

Hướng dẫn tạo nút Back to TOP - lên đầu trang ẩn hiện mượt mà
[Tải ảnh]


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 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é:

Hướng dẫn tạo nút Top-Up - Về đầu trang ẩn hiện
* Sẽ có 2 cách để tạo nút "Top-Up" là:

- Cách 1: Sử dụng HTML & CSS thuần.
- Cách 2: Sử dụng HTML + CSS & JQuery.

Đối với Cách 1:
Bạn đặt vào nơi thích hợp (thường là cuối trang) đoạn HTML sau:
<a href="#" class="button">Lên đầu trang</a>
<style>
.button {
background: #009688;
text-decoration: none;
border-left: #00BCD4 inset 1px;
border-right: #00BCD4 outset 1px;
padding: 3px;
text-align: center;
cursor: pointer;
}
</style>

Xong Cách 1, 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 Cách 2:
Cách 2 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 Cách 2 này chắc chắn khách truy cập sẽ hai lòng với wapsite của bạn vui

Bắt đầu:
Trước tiên các bạn phải import icon font awesome & JQuery đặt lên đầu wapsite (header đó)
<!-- 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"
<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({scrollTop: 0}, 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:
$('body,html').animate({scrollTop: 0}

{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)

Xong!
Chúc các bạn thành công!
Một chức năng khá hay của JQuery và icon font awesome có thể hữu ích cho bạn!

Nguồn: Poo - Diễn đàn Abroths.Xyz
↓ Tập tin Đính kèm ↓
↑↑ Lượt xem: 652
score
Đánh giá: 4.5/ 5, 652 bình chọn
- Chia sẻ:G  T
BBCode:

Link:
+ Còn “nhiều” Lắm!
+

Share code Diễn đàn trên Xtgem Full chức năng cực chất GetSmile.Mobie.In bởi Cú Đêm Việt Nam

+

Share code PHP hiển thị thông tin khách đang online trên Site

+

Sử dụng HTML và CSS tạo hiệu ứng hiển thị mô tả khi di chuột vào hình ảnh

+

Ajax là gì? Hướng dẫn code cơ bản khi xử lý dữ liệu với jQuery Ajax

+

Share full code PHP bộ tool cài đặt và quản lý Filelist KhoTruyen365 Xtgem

Trang chủ Cú Đêm Việt Nam Trang Chủ[1-1-652]