pageScroll.js - 원페이지 사이트에 스크롤 부드럽게 움직이는 페이지

[소개]

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

[플러그인명]

pageScroll.js

[버전]

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. 워크식스