<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 : 동작 완료 후 동작을 추가할 수 있습니다.
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.