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 to Scroll nút top Jquery mượt dùng - Back chạy
Tags Google: [Share] Code nút Back to top - Scroll to top dùng Jquery nhẹ chạy mượt chạy chạy top Scroll Back Jquery [Share] Jquery to mượt
Bạn đã xem chưa?
Tin Giải Trí Lịch sử về thế giới Pokémon
Tool Leech [Share] Tool Leech truyện tranh từ TruyenTranhMoi.Com
Kinh nghiệm - Thủ thuật Hướng dẫn mở port tạo server game, wap/web
Kinh nghiệm - Thủ thuật Hướng dẫn bắn siêu cao Bem Bem Go chuẩn
Tin Giải Trí Lịch sử về thế giới Pokémon
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
-->

Disneyland 1972 Love the old s