[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 Empty [Code] Nút lên đầu trang

Bài gửi by HelpsFMvi 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

HelpsFMvi
HelpsFMvi
Ban Quản Trị FMvi
Ban Quản Trị FMvi


Số bài : 104
HelpsPoints : 15318
Likes : 33
Ngày tham gia : 10/03/2016
Trạng thái :
Online
Offline

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

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

https://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 | Báo cáo lạm dụng | Thảo luận mới nhất
Stylish responsive footer | Script Tutorials