[소개]

원페이지 사이트에 사용하는 페이지 플러그인으로 스크롤 페이지간 상하 이동을 부드럽게 만들어 줍니다.







[플러그인명]







[버전]

3.1
웹표준을 고려한 수정

3.0
각 섹션별 스크롤 높이 리턴 기능 추가

2.0 
페이지 클릭 후 동작 추가 가능하도록 수정

1.0
최초작성








[사용법]

<style>

div {height:600px;}

ul{position:fixed; right:20px; top:25%;}

li{color:#fff; cursor:pointer;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

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

<script src="플레이그라운드에서 제공하는 플러그인 cdn"></script>

<script>

$(function(){

$('ul').pageScroll({

speed:2000

});

});

</script>



<div id="page1" style="background:gray"></div>


<div id="page2" style="background:black"></div>


<div id="page3" style="background:orange"></div>


<div id="page4" style="background:green"></div>



<ul>

<li title="page1"></li>

<li title="page2"></li>

<li title="page3"></li>

<li title="page4"></li>

</ul>


1. 플레이그라운드에 홈페이지에서 제공하는  cdn을 복사하여 붙여 넣습니다. (제이쿼리와 제이쿼리 ui가 사전에 선언되어 있어야 합니다.)





<style>

div {height:600px;}

ul{position:fixed; right:20px; top:25%;}

li{color:#fff; cursor:pointer;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

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

<script src="플레이그라운드에서 제공하는 플러그인 cdn"></script>

<script>

$(function(){

$('ul').pageScroll({

speed:2000

});

});

</script>



<div id="page1" style="background:gray"></div>


<div id="page2" style="background:black"></div>


<div id="page3" style="background:orange"></div>


<div id="page4" style="background:green"></div>



<ul>

<li title="page1"></li>

<li title="page2"></li>

<li title="page3"></li>

<li title="page4"></li>

</ul>


2. 페이지 마다 id를 부여 합니다. 아이디는 원하는 값을 다르게 부여 합니다.






<style>

div {height:600px;}

ul{position:fixed; right:20px; top:25%;}

li{color:#fff; cursor:pointer;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

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

<script src="플레이그라운드에서 제공하는 플러그인 cdn"></script>

<script>

$(function(){

$('ul').pageScroll({

speed:2000

});

});

</script>



<div id="page1" style="background:gray"></div>


<div id="page2" style="background:black"></div>


<div id="page3" style="background:orange"></div>


<div id="page4" style="background:green"></div>



<ul>

<li title="page1"></li>

<li title="page2"></li>

<li title="page3"></li>

<li title="page4"></li>

</ul>


3. 페이지에 해당 하는 요소를 작성 한 후 for에 클릭시 이동할 id 값을 넣어 줍니다.






<style>

div {height:600px;}

ul{position:fixed; right:20px; top:25%;}

li{color:#fff; cursor:pointer;}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

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

<script src="플레이그라운드에서 제공하는 플러그인 cdn"></script>

<script>

$(function(){

$('ul').pageScroll({

speed:2000,

scrollmove : function(result){

/* result로 각 세션별 스크롤 높이를 가져옵니다. */

},

compleate : functoin(result){

/* result로 클릭한 페이지의 아이디 값이 넘어 옵니다. */

}

});

});

</script>



<div id="page1" style="background:gray"></div>


<div id="page2" style="background:black"></div>


<div id="page3" style="background:orange"></div>


<div id="page4" style="background:green"></div>



<ul>

<li title="page1"></li>

<li title="page2"></li>

<li title="page3"></li>

<li title="page4"></li>

</ul>


4. 페이지 그룹에 해당하는 엘리먼트에 pageScroll을 실행해 줍니다.





[옵션설명]


$('ul').pageScroll({

speed : 2000, //이동 속도를 결정 합니다. (1000=1초)

scrollmove : function(result){

/* result로 각 세션별 스크롤 높이를 가져옵니다. */

},

compleate : functoin(result){

/* result로 클릭한 페이지의 아이디 값이 넘어 옵니다. */

}

});





[기타]

프로그램 소스는 여기에서 다운로드 받을수 있습니다.


[문의하기]


copyright ⓒ 2017. 워크식스


+ Recent posts