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="/js/pageScroll.js"></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. 제이쿼리와 제이쿼리 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="/js/pageScroll.js"></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. 다운로드 받은 플러그인을 설치 합니다.

 

 

 

 

<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="/js/pageScroll.js"></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. 스크롤 이동의 기준점이 되는 엘리먼트(요소)들에 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="/js/pageScroll.js"></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>

 

4. 이동 버튼이 될 엘리먼트(요소)를 만들어 TITLE에 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="/js/pageScroll.js"></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>

 

5. 페이지가 실행될때 자동으로 실행될수 있도록 위와 같이 작성합니다.

 

 

 

$('ul').pageScroll({
   
speed:2000 //스크롤 이동속도를 조절 합니다.
});

 

6. 필요에 따라 스크롤 이동 속도 옵션을 조절 합니다.

 

 

 

$('ul').pageScroll({
    speed:2000,

    compleate:function(){

        alert(1);

    }
});

 

7. 스크롤 이동 동작이 완료된 후 액션이 필요한 경우 위와 같이 작성 합니다.

 

 

 

$('ul').pageScroll({
    speed:2000,

    diff:67,

    compleate:function(){

        alert(1);

    }
});

 

8. 스크롤 이동후 차이가 발생할 경우 옵션을 통해 조정 합니다. (예 : -67px 만큼 덜 이동)

 

 





! 플러그인 설치 및 수정은 견적문의 해주세요.