일단은 프로그래머 나부랭이

jquery를 이용한 스크롤 애니메이션 본문

Java Script (+Jquery)

jquery를 이용한 스크롤 애니메이션

하필이면 도대체가 2018. 3. 27. 15:58

<html>

 <head>

  <meta charset="UTF-8">

  <title>스크롤 애니메이션 테스트</title>

  <style type="text/css">

.contents{

padding: 70px 5px 5px 5px;

}

  </style>

  <!--jquery 라이브러리-->

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

  <script type="text/javascript">

    // scrollMove 함수를 이용하여 스크롤 이동

function scrollMove(seq){

//id가 p로 시작하는 객체를 찾아서, 그곳까지 이동

        var loc_obj = $("#p" + seq).offset();

//html의 body를 애니메이션하고 스크롤을 offset의 위치만큼 움직입

        $('html, body').animate({scrollTop : loc_obj.top}, 1000);

    }

  </script>

 </head>

 <body style="margin: 0px;">

<!-- 상단 메뉴 = 고정 -->

<div style="display: block; border: solid 1px; position: fixed; width: 100%; padding: 0px; background-color: white;">

<table style="height:50px;">

<tr>

<td onclick="scrollMove('1')" sytle="cursor: pointer;">1페이지</td>

<td onclick="scrollMove('2')" sytle="cursor: pointer;">2페이지</td>

<td onclick="scrollMove('3')" sytle="cursor: pointer;">3페이지</td>

</tr>

</table>

</div>

<!-- 0번 -->

<section id="p0" style="height:0px;">

</section>

<!-- 1번 -->

<section class="contents" id="p1" style="height: 450px;">

여긴 홈으로 쓸꺼야

</section>

<!-- 2번 -->

<section class="contents" id="p2" style="height: 450px;">

2페이지(?)

</section>

<!-- 3번 -->

<section class="contents" id="p3" style="height: 450px;">

3페이지인가 아닌가

</section>

<!-- 최상단으로 가는 버튼 -->

<div id="top_btn" style="top: 95%; left: 90%; border: solid 1px; position: fixed; cursor: pointer;" onclick="scrollMove('0')">

맨 위로 간다!

</div>

 </body>

</html>

_______________________________________________________________________________________________________________



위의 소스를 가지고 테스트가 가능합니다.

간만에 jquery만져봤네요 ㅎㅎ;;

저작자표시

'Java Script (+Jquery)' 카테고리의 다른 글

get/post 데이터 전송 방식의 차이  (0) 2018.03.08
천단위 구분기호(,) 찍는 함수  (0) 2017.02.17
포커스 자동 이동하는 함수  (0) 2016.09.20
XSS - 크로스 사이트 스크립팅에 대해서  (0) 2016.08.19
input 태그 file 속성으로 파일 업로드할 때 특정 확장자만 업로드하도록 제한하는 법  (0) 2016.07.28

'Java Script (+Jquery)' Related Articles more
Comments