[G5] scroll 상단으로 / 가운데로 / 하단으로 이동하기 > 기술자료 | 해피정닷컴

[G5] scroll 상단으로 / 가운데로 / 하단으로 이동하기 > 기술자료

본문 바로가기

사이트 내 전체검색

[G5] scroll 상단으로 / 가운데로 / 하단으로 이동하기 > 기술자료

그누보드 [G5] scroll 상단으로 / 가운데로 / 하단으로 이동하기

페이지 정보


첨부파일

본문

그누보드 sir 사이트의 우측 하단의 top / center / bottom 버튼 사용하기


1. 첨부 이미지를 그누보드 / img 폴더에 업로드



2. theme / basic / tail.php 내용에서

    <button type="button" id="top_btn"><i class="fa fa-arrow-up" aria-hidden="true"></i><span class="sound_only">상단으로</span></button>
        <script>
        
        $(function() {
            $("#top_btn").on("click", function() {
                $("html, body").animate({scrollTop:0}, '500');
                return false;
            });
        });
        </script>

를 아래의 것으로 변경

    <!--script src="//code.jquery.com/jquery-1.12.4.min.js"></script-->
    <style>
    /*top_btn2*/
    #top_btn2{position:fixed;bottom:170px;left:0px;width:100%;_position:absolute;z-index:999; font-size:20px;}
    #top_btn2 .top_btn_wp{width:1050px;margin:0 auto;position:relative}
    #top_btn2 .top_btn_wp a{position:absolute;display:inline-block}
    #top_btn2 .top_btn_wp a.scroll-top{width:16px;height:18px;top:0;right:-70px;background:url('<?php echo G5_IMG_URL; ?>/top_btn2.png') -12px 0 no-repeat;text-indent:-9999px}
    #top_btn2 .top_btn_wp a.scroll-top:hover{background:url('<?php echo G5_IMG_URL; ?>/top_btn2.png') -12px -27px no-repeat}
    #top_btn2 .top_btn_wp a.scroll-bottom {width:16px;height:18px;top:44px;right:-70px;background:url('<?php echo G5_IMG_URL; ?>/top_btn2.png') -30px -27px no-repeat;text-indent:-9999px}
    #top_btn2 .top_btn_wp a.scroll-bottom:hover {background:url('<?php echo G5_IMG_URL; ?>/top_btn2.png') -30px 0 no-repeat}
    #top_btn2 .top_btn_wp a.scroll-center {width:8px;height:8px;top:27px;right:-66px;background:url('<?php echo G5_IMG_URL; ?>/top_btn2.png') no-repeat;text-indent:-9999px}
    #top_btn2 .top_btn_wp a.scroll-center:hover {background:url('<?php echo G5_IMG_URL; ?>/top_btn2.png') 0 -27px no-repeat}
    </style>
    <div id="top_btn2">
        <div class="top_btn_wp">
            <a href="#" title="상단으로" class="scroll-top">상단으로</a>
            <a href="#" title="가운데로" class="scroll-center">가운데로</a>
            <a href="#" title="하단으로" class="scroll-bottom">하단으로</a>
        </div>
    </div>
    
    <script>
    $(function() {
    
        $("#top_btn2 .scroll-top").on("click", function(e) {
            e.preventDefault();
            $("html, body").animate({scrollTop:0}, '500');
            return false;
        });
        $("#top_btn2 .scroll-center").on("click", function(e) {
            e.preventDefault();
    
            var middle_pos = $("body").offset().top - ( $(window).height() - $("body").outerHeight(true) ) / 2;
    
            $("html, body").animate({scrollTop:middle_pos}, '500');
            return false;
        });
        
        $("#top_btn2 .scroll-bottom").on("click", function(e) {
            e.preventDefault();
            
            var scrollBottom = $("html,body").scrollTop + $("html,body").height();
            
            $("html, body").animate({scrollTop:$(document).height()}, '500');
            return false;
        });
    });
    </script>
 

댓글목록

등록된 댓글이 없습니다.


Total 2,634건 20 페이지
  • RSS
기술자료 목록
2254
일반   9921  2018-08-17 15:18 ~ 2018-08-17 15:19  
2253
HTML   17512  2018-08-17 06:39  
2252
HTML   9764  2018-08-15 05:06 ~ 2018-08-15 05:58  
2251
HTML   6678  2018-08-13 18:50  
2250
HTML   24196  2018-08-09 10:12 ~ 2018-08-09 13:26  
2249
JavaScript   21970  2018-08-02 14:39 ~ 2019-11-24 22:20  
2248
HTML   9855  2018-08-01 05:43 ~ 2021-01-05 11:39  
2247
일반   14199  2018-08-01 05:41 ~ 2022-04-12 16:58  
2246
PHP   7845  2018-07-26 20:20  
2245
JavaScript   9211  2018-07-25 14:30 ~ 2018-09-21 08:36  
2244
그누보드   6830  2018-07-25 03:41 ~ 2018-08-26 05:56  
2243
JavaScript   7251  2018-07-23 14:43 ~ 2018-07-23 16:45  
2242
HTML   9334  2018-07-23 02:20 ~ 2018-07-23 14:33  
2241
PHP   10185  2018-07-21 00:10 ~ 2018-07-21 03:56  
열람
그누보드   9939  2018-07-20 20:47 ~ 2018-07-20 21:01  
2239
JSP   8593  2018-07-19 18:57 ~ 2017-10-06 00:00  
2238
JSP   15745  2018-07-19 18:47 ~ 2018-07-26 19:25  
2237
HTML   18169  2018-07-17 18:38 ~ 2020-03-25 18:49  
2236
일반   9699  2018-07-17 17:14 ~ 2018-07-17 17:54  
2235
그누보드   8963  2018-07-17 02:10 ~ 2022-11-15 13:54  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.