Back To Top 3D Button - Thcs Nguyễn Tri Phương
Scroll To Top
TRANG CHỦ TRANG CHỦ

TRANG CHỦ » WINDOWS » Thủ thuật máy tính » Thủ thuật Blogspot

Back To Top 3D Button

Đăng lúc: Thứ hai - 02/03/2015 23:00 | Người đăng bài viết: Trường THCS Nguyễn Tri Phương | Đã xem: 645 | Phản hồi: 0
Back To Top 3D Button

Back To Top 3D Button

Nút back to top đã không còn xa lạ với hầu hết blogger nhưng hôm nay mình cũng xin design lại button này theo một phong cách riêng của mình với một vài hiệu ứng 3d từ css box-shadow để cộng đồng blogger nha ta có thêm sự lựa chọn.
Đầu tiên bạn vào mục "Mẫu" → "Chỉnh sửa HTML"
1. Về css: chèn đoạn css này phía trên thẻ ]]></b:skin>

/* Back To Top */
#totop{position:fixed; bottom:20px; right:20px; cursor:pointer; display:none; background:url(https://googledrive.com/host/0B-PN1SIugzO-WE5ZeUo5Y3lRVkU) no-repeat center; width:40px; height:40px; box-shadow:0 0 2px 1px #333; border-radius:50%; transition: background 0.2s}
#totop:hover{box-shadow:0 0 2px 1px #000 inset; background: #fff url(https://googledrive.com/host/0B-PN1SIugzO-WE5ZeUo5Y3lRVkU) no-repeat center;}
Thay đổi giá trị lại cho phù hợp với trang của bạn:
bottom:20px; button cách phía dưới 20px
right:20px; button cách bên phải 20px
2. Chèn thư viện jquery vào phía dưới thẻ ]]></b:skin>:
<script src=' https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js ' type='text/javascript'/>
Chú ý: Nếu trong template đã có file jquery rồi thì bỏ qua bước 2 để tránh xung đột code.
3. Chèn code back to top này phía trên thẻ </body>

<div id='totop'/>
<script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$(&#39;#totop&#39;).fadeIn();}else{$(&#39;#totop&#39;).fadeOut();}});$(&#39;#totop&#39;).click(function(){$(&#39;body,html&#39;).animate({scrollTop:0},800);});});</script>
Save lại và về trang chủ kiểm tra thành quả.
Nếu có vấn đề gì thì để lại comment bên dưới mình sẽ sớm hồi âm.

Về đầu bài viết

Tổng số điểm của bài viết là: 0 trong 0 đánh giá
Click để đánh giá bài viết

Những tin mới hơn

Những tin cũ hơn

 
QUY ĐỊNH THỜI GIAN VÀO LỚP. NĂM HỌC 2015 - 2016
Xem tại đây
Download tại đây
Nếu bạn đang buồn Hãy thử tìm và nghe lại các bài hát mà mấy năm trước bạn mê mẩn.

LỊCH CÔNG TÁCღ

THÀNH VIÊNღ

LỊCHღ


BẢN ĐỒ HÀNH CHÍNHღ

THỐNG KÊ TRUY CẬPღ

Đang truy cậpĐang truy cập : 23


Hôm nayHôm nay : 1341

Tháng hiện tạiTháng hiện tại : 29009

Tổng lượt truy cậpTổng lượt truy cập : 3342237

THĂM DÒ Ý KIẾNღ

Bạn biết http://thcsnguyentriphuong-hoavang.edu.vn qua:

Bạn bè, người thân

Công cụ tìm kiếm (Cốc Cốc, google, Bing...)

Quảng cáo (tạp chí, băng đĩa,...)

Lựa chọn khác

MỖI LÚC MỘT NỤ CƯỜIღ




Trang web hiển thị tốt nhất với trình duyệt Coccoc, FirefoxGoogle Chrome và cài Flash Player với độ phân giải 1024x768 pixels trở lên!
Website được thiết kế bởi: Phạm Văn Phương - trường thcs Trần Quang Khải
Hỗ trợ thiết bị di động.   Liên hệ kỹ thuật