Tạo nút Back to Top với hiệu ứng từ jQuery - Thanh'sBlog - Blog công nghệ, chia sẻ niềm đam mê!

Tạo nút Back to Top với hiệu ứng từ jQuery Không rõ

08/12/2014 Đăng bởi: Lover Admin , Nhận xét(0) , Đọc(2765) Lớn | Vừa | Nhỏ

Hôm nay lang thang trên mạng thì thấy một cái Back to Top Button khá đẹp, sử dụng hiệu ứng trượt từ jQuery, và đặc biệt là nó ẩn/hiện khi cần thiết. Với những trang web có phần nội dung khá dài thì nút Back to Top này giúp người đọc tiết kiệm thời gian khi phải rê chuột lên trên cùng của trang.

Highslide JS


Để thực hiện các bạn chèn đoạn code sau phía trên trong template:

<style type='text/css'>#bttop{border:1px solid #4adcff;background:#24bde2;
textalign:center;padding:5px;position:fixed;bottom:35px;right:10px;cursor:pointer;display:none;color:#fff;font-size:11px;font-weight:900;}
#bttop:hover{border:1px solid #ffa789;background:#ff6734;}
</style>
<div id='bttop'>BACK TO TOP</div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$('#bttop').fadeIn();}else{$('#bttop').fadeOut();}});$('#bttop').click(function(){$('body,html').animate({scrollTop:0},800);});});</script>


Ngoài ra mình còn sưu tầm được rất nhiều code tạo back top top, các bạn có thể xem thêm ở đây

Chúc các bạn thành công!

Các tìm kiếm liên quan đến:
back to top
code back to top
back to top wordpress
back to top icon
back to top joomla
back to top blogger
back to top html
back to top javascript
back to top button
back to top boblog


Nhấn Like và +1 nếu thấy bài viết có ý nghĩa!

  • Đăng lên ZingMe
  • Đăng Lên Facebook
  • Đăng Lên Twitter
  • LinkedIn
  • Đăng lên ZingMe
  • Đăng Lên Google Buzz
  • Đăng Lên FriendFeed
  • Đăng Lên Reddit
  • Đăng Lên MySpace
  • Đăng Lên Yahoo! Bookmarks
  • Đăng Lên Digg
  • Đăng Lên Yahoo Buzz
  • Đăng Lên Baidu
Đăng bình luận lên Facebook của bạn:
Khuyến cáo: Không hổ trợ comment bằng facebook nhé!


Sửa lần cuối bởi Lover Admin Sửa vào 08/12/2014 11:02
Tags: , , , , , , , , ,
Viết nhận xét

Tên gọi

Facebook của bạn

Email

You can also login with your OpenID:
HTML code BBcode Mặt cười Ẩn giấu Hãy nhớ [Đăng nhập] [Đăng ký. ]
               
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot
emotemotemotemotemot

Bạn muốn hình đại diện hiển thị ngay bên cạnh lời bình luận của bạn không?
Hãy tham gia vào Gravatar và thiết lập hình đại diện hoàn toàn miễn phí!
Gravatar là gì? Avatar hình đại diện toàn cầu, bạn đã có avatar chưa? click đăng ký ngay!
TÌNH HÌNH WEBSITE

Thống kê Online trên website.

Hiện có 126 người đang online
(0 thành viên và 126 khách)

Tổng quan tình hình trên ThanhBlog.InFo

Thống kê đến thời điểm hiện tại số lượt khách ghé thăm blog là: 4521044
Số người đã ghé thăm blog trong ngày là: 3612
Số bài viết: 6859 Số comment hiện tại là: 2843 Số trích dẫn 1
Số thành viên đã đăng ký là: 24516
Nào cùng nâng ly chào mừng bạn vudangviet đến với ThanhBlog. Chúc các bạn có những giây phút bổ ích và hạnh phúc !