pageScroll.js

플러그인 사용을 위해선 도메인을 등록해야 합니다.
플러그인을 설치할 사이트의 도메인을 등록 후 사용법에 따라 이용해 주세요.

pageScroll.js

메뉴 선택에 따라 스크롤이 자동으로 이동하는 플러그인

사용법

<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="//work6.kr/plugin/plugin_link/36"></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>

<script>
$('ul').pageScroll({
    speed:2000,
    diff:67,
    compleate:function(){

    }
});
</script>

 

 

 

 

설치방법

 

1. Line2 ~ 4 : 스타일을 복사 그리고 붙여넣기 합니다. 웹 사이트에 맞게 수정 합니다.


2. Line7 : 제이쿼리를 설치 및 연결 합니다.


3. Line8 : 제이쿼리UI를 설치 및 연결 합니다.


4. Line9 : 플러그인 사용하기 후 도메인을 등록 합니다. 코드를 복사 그리고 붙여넣기 합니다.


5. Line11 ~ 14 : 페이지를 만들고 ID를 부여 합니다.


6. Line16 ~ 21 : 메뉴 html을 복사 그리고 붙여넣기 합니다.


7. Line24 ~ 40 : 스크립트를 복사 그리고 붙여넣기 합니다.


8. Line25 : 스크롤 이동 속도를 조절 합니다.


9. Line26 : 이동 후 차이가 난 경우 조절 합니다.


10. Line27 : 동작 완료 후 동작을 추가할 수 있습니다.

 

 
 
 
 
 
Install
 

1. Line 2 ~ 4: Copy and paste the style. Modify it to fit your website.


2. Line7: Install and connect to jquery.


3. Line8: Install and connect the jquery UI.


4. Line9: Register the domain after using the plug-in. Copy and paste code.


5. Line 11 ~ 14: Create a page and give it an ID.


6. Line 16 ~ 21: Copy and paste menu html.


7. Line24 ~ 40: Copy and paste the script.


8. Line 25: Adjust the scroll speed.


9. Line26: Adjust when there is a difference after moving.


10. Line27: You can add motion after completion of motion.