[Code] Nút lên đầu trang

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

[Code] Nút lên đầu trang

Bài gửi by HelpsFMvi on Wed Jun 22, 2016 5:03 pm


Demo:




[You must be registered and logged in to see this image.]

Hướng dẫn:


1. Cho đoạn code dưới đây vào overall_header nếu muốn hiện ở tất cả các trang

Code:
<div id="top-button"><a href="" class="scrolltop">top</a></div>

2. Tạo 1 trang javascript mới cho đoạn code sau vào:

Placement chọn In all the page
Code:
jQuery(document).ready(function(){
 jQuery(function () {
 jQuery('#top-button').hide();
 jQuery(window).scroll(function () {
 if (jQuery(this).scrollTop() >= 500) {
 jQuery('#top-button').fadeIn();
 } else {
 $('#top-button').fadeOut();
 }
 });
 });
                   jQuery('#top-button a').click(function () {
                        jQuery('body,html').animate({
                            scrollTop: 0
                        }, 800);
                        return false;
                    });
});

3. Cho đoạn dưới đây vào CSS:

Code:
#top-button {
 position: fixed;
 bottom: 50px;
 right: 6%;
 width: 32px;
 height: 32px;
 text-indent: -9999px;
 }
 #top-button a {
 display: block;
 width: 32px;
 height: 32px;
 background: url(http://cdn2.iconfinder.com/data/icons/gnomeicontheme/32x32/actions/stock_top.png) top center no-repeat;
 overflow: hidden;
 border: none;
 }

Thay link nút lên đầu trang ở trong CSS bằng cách tìm link ảnh này
[You must be registered and logged in to see this link.]

Nguồn: FMCodes



Cập nhật chữ ký !!
avatar
HelpsFMvi
Ban Quản Trị FMvi
Ban Quản Trị FMvi


Số bài : 96
HelpsPoints : 2494
Likes : 28
Ngày tham gia : 10/03/2016
Trạng thái :
Online
Offline

Tuổi : 19
Location : Ninh Thuận
Google Chrome
Phpbb3

[Click để xem tài sản HelpsFMvi]

Xem lý lịch thành viên http://helps.forumvi.com

Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang

- Similar topics

 
Permissions in this forum:
Bạn không có quyền trả lời bài viết
Free forum | © phpBB | Free forum support | Liên hệ | Report an abuse | Sosblogs
Stylish responsive footer | Script Tutorials