jquery를 이용하여 (이미지/글자/버튼) 클릭시, 한 페이지에 원하는 (이미지/글자/버튼) 스크롤 하기
1 <HTML>
2 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
3 <style>
4 div {margin-bottom:40px;}
5 </style>
6 <script>
7 function fnMove(seq){
8 var offset = $("#div" + seq).offset();
9 $('html, body').animate({scrollTop : offset.top}, 400);
10 }
11 </script>
12 <BODY>
13 <button onclick="fnMove('1')">div1로 이동</button>
14 <button onclick="fnMove('2')">div2로 이동</button>
15 <button onclick="fnMove('3')">div3로 이동</button>
16 <div id="div1">div1</div>
17 <div id="div2">div2</div>
18 <div id="div3">div3</div>
19 </BODY>
20 </HTML>
2# : jquery import 시켜서 사용한다.
4# : 임의로 div 태그들의 간격을 margin-bottom 을 이용하여 스크롤이 정상적으로 작동되는지 확인한다.
7# : 스크롤을 이동시킬 함수이다.
8# : 이동하고 싶은 태그를 선택하여 offset() 함수를 이용한다. [ 절대좌표가 있는 객체를 가져온다.]
9# : jquery animate의 scrollTop 함수를 이용하여 절대좌표 top 위치로 이동한다. [ 400 은 이동되는 시간이다. ]
'공부하자 > PHP' 카테고리의 다른 글
| php 난수 생성방법 (0) | 2018.11.27 |
|---|---|
| php에서 경고창 뜨위기(alert창 띄우기) (0) | 2017.07.22 |
| [PHP] Include, Include_once, Require, Require_once (0) | 2017.07.20 |
| 무료 폼메일 다운로드 (0) | 2017.03.13 |
| PHP 페이지 자동 이동 방법 4가지 (0) | 2017.03.12 |