Polly po-cket
Forum Videos High Team
Đăng ký | Đăng nhập | Quên Pass?
» » » [Share] Code nút Back to top - Scroll to top dùng Jquery nhẹ chạy mượt

[Share] Code nút Back to top - Scroll to top dùng Jquery nhẹ chạy mượt

Lượt xem:
Bạn phải để Bình luận
23-03-2017#
admin offline * LeYTi (Sáng Lập!)
Level MAX  Like 0
Xu 0  TN 0
VnMaster

Code nút Back to top - Scroll to top này là nút trở lên đầu trang, sử dụng jquery nhẹ và icon font awesome tạo nên hiệu ứng mượt mà đẹp mắt :D

Code này cực kì dễ dàng tùy chỉnh nha.

Đầu tiên để code này vào head hoặc foot (Bạn nào có jquery và font awesome sẵn r thì khỏi thêm làm gì cho nặng, trường hợp code không chạy mới add lại thôi :D )
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
Copy code


Đây là code nút Back to Top - Scroll to top: (Nên để sau thẻ body hoặc trước thẻ đóng body là tốt nhất, còn js thì để đâu cũng đc)

<script>

// kéo xuống khoảng cách 600px thì xuất hiện nút Top-up

var offset = 50;

// 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>
Copy code


Chúc các bạn thành công :D vì code sử dụng HTML + JS + CSS nên tương thích hầu hết tất cả mã nguồn :v

Demo: https://xovigame.tk https://videosvn.org
Đã chỉnh sửa bởi: LeYTi
Tổng số 1 bình luận
Chia sẻ bài viết: Sắp xếp:
Liên kết:
BBcode:
Tags:
Tags Diễn đàn: [Share] Code nút Back to top - Scroll to top dùng Jquery nhẹ chạy mượt Jquery dùng Back top mượt Code chạy Back - [Share]
Tags Google: [Share] Code nút Back to top - Scroll to top dùng Jquery nhẹ chạy mượt nhẹ Scroll [Share] Jquery nút Jquery chạy [Share] dùng Code
Bạn đã xem chưa?
JohnCMS [Share] Firewall VinaPro v1 Mod từ DQH Firewall cho JohnCMS
Tin Giải Trí Thông tin sơ lược về các nhân vật và hội trong anime Fairy Tail
Tin tức Anh hùng tình cờ" đã giải cứu thế giới khỏi "WannaCry Ransomware"
Tin Giải Trí Thông tin sơ lược về các nhân vật và hội trong anime Fairy Tail
Tool Leech [Share] Tool Leech truyện tranh từ TruyenTranhMoi.Com
Tìm kiếm
Online
» Có 0 thành viên và 1 khách đang trực tuyến.
Stats
Backlink
Aly.VN - Rút gọn Link kiếm tiền
phucit24high.blogspot.com - Blog chia sẻ tổng hợp
Backlink
Automatic Backlinks, Free backlinks , Raovat.2ola.Net free auto backlink, tao backlink, tao backlink chat luong cao mien phi Auto Backlinks,autohits,autosurf, luottruycap Pixelwerbung Text Backlink Exchanges SEO Links Attitude | Free SEO Links Building
TOP
Facebook - Thanks to XTgem™ Sitemap - Nội quy
© 2015-2017 VnMaster.Yn.Lt
-->