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

본문 바로가기
사이트 내 전체검색

기술자료

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

페이지 정보

댓글 0건 조회 285회 작성일 2018-07-20 20:47 ~ 2018-07-20 21:01

본문

그누보드 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,284건 1 페이지
기술자료 목록
번호 제목
공지 일반   16359  2001-08-31 11:52 ~ 2017-12-05 16:33  
2283 HTML   21  2018-10-14 01:19 ~ 2018-10-14 02:09  
2282 킴스큐   59  2018-10-04 23:04  
2281 MySQL   70  2018-10-03 02:29  
2280 MySQL   89  2018-10-02 22:55 ~ 2018-10-02 22:58  
2279 PHP   113  2018-09-30 15:07 ~ 2018-09-30 15:53  
2278 그누보드   120  2018-09-27 23:56  
2277 그누보드   102  2018-09-27 22:01 ~ 2018-09-27 22:40  
2276 그누보드   140  2018-09-22 01:04 ~ 2018-09-22 01:17  
2275 그누보드   133  2018-09-21 19:28  
2274 그누보드   167  2018-09-15 08:08 ~ 2018-10-15 14:56  
2273 PHP   225  2018-09-14 05:59  
2272 전자결제   171  2018-09-14 04:57 ~ 2018-09-14 04:58  
2271 전자결제   173  2018-09-12 14:17 ~ 2018-09-13 14:38  
2270 일반   317  2018-08-31 18:10 ~ 2018-09-14 20:50  
2269 HTML   249  2018-08-30 15:47  
2268 그누보드   253  2018-08-30 10:41 ~ 2018-08-30 10:48  
2267 PHP   231  2018-08-29 03:21 ~ 2018-08-29 17:13  
2266 JavaScript   292  2018-08-28 18:49  
2265 HTML   286  2018-08-27 14:33  
게시물 검색

회원로그인

계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
522
어제
2,925
최대
3,174
전체
4,316,761

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 02-865-3528   주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2018 해피정닷컴. All Rights Reserved.