Back To Top Button 기능

본문 바로가기
사이트 내 전체검색
회사뉴스 : 그누보드5 다국어버전! 딱 8월 5일 까지만 대폭 할인가에 제공… 인기글 관련링크 , 다국어사이트 제작을 위한 솔루션을 공개합니다. 인기글 , 일하다가 가끔 게임을 하면서 스트레스를 날리세요. 인기글 관련링크 , 게시판내용을 PDF으로 저장하기 인기글 관련링크 , 좋아요|나빠요 표현 게시판 인기글


회원로그인

설문조사

좋은 습관이란?



Back To Top Button 기능

Back To Top Button 기능

그누보드5를 위한 Back To Top Button 기능 구현

 

페이지 스크롤되면 오른쪽 하단에 자동으로 위로 갈 수 있는 버튼이 나타남..

 

적용방법:

1. css

<style type="text/css">

/* BackToTop button css */

#Topscroll {

    position:fixed;

    right:10px;

    bottom:10px;

    cursor:pointer;

    width:50px;

    height:50px;

    background-color:#3498db;

    text-indent:-9999px;

    display:none;

    -webkit-border-radius:60px;

    -moz-border-radius:60px;

    border-radius:60px

}

#Topscroll span {

    position:absolute;

    top:50%;

    left:50%;

    margin-left:-8px;

    margin-top:-12px;

    height:0;

    width:0;

    border:8px solid transparent;

    border-bottom-color:#ffffff

}

#Topscroll:hover {

    background-color:#e74c3c;

    opacity:1;filter:"alpha(opacity=100)";

    -ms-filter:"alpha(opacity=100)";

}

</style>

<script>

$(document).ready(function(){ 

    $(window).scroll(function(){ 

        if ($(this).scrollTop() > 100) { 

            $('#Topscroll').fadeIn(); 

        } else { 

            $('#Topscroll').fadeOut(); 

        } 

    }); 

    $('#Topscroll').click(function(){ 

        $("html, body").animate({ scrollTop: 0 }, 600); 

        return false; 

    }); 

});

</script>

 

2. body

<a href="javascript:void(0);" id="Topscroll" title="Scroll to Top" style="display: none;">Top<span></span></a> 

 

미리보기 : http://www.live24.co.kr/

 


이 사이트는 그누보드5, 영카트5 기반 프로그램 개발을 위한 사이트입니다. 궁금하신 사항은 http://www.365ok.co.kr을 이용해 주시기 바랍니다.
회사소개 개인정보취급방침 서비스이용약관 Copyright © 코리아뉴스. All rights reserved.
모바일 버전으로 보기