<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//work6.kr/plugin/plugin_link/43"></script>
<script>
    $(function(){
        /* 메뉴 클릭시 스크롤 이동 */
    $('#thumnail_list ul').pageScroll2({
            container:'#container',
            speed:2000,
            compleate:function(data){
                alert(data);
            }
    });
    });
</script>

<style>
#thumnail_list{
    position:fixed;
    width:112px;
    height:100%;
    background:#222222;
    left:4%;
    overflow:hidden;
}
#thumnail_list .container{
    width:112px;
    padding-right:20px;
    height:100%;
    position:relative;
    overflow-y:auto;
}
#thumnail_list li{
    margin:10px 10px;
    cursor:pointer;
}
#thumnail_list li img{
    width:88px;
    border:2px solid #fff;
}


#container{
    overflow:hidden;
}
#container ul li:nth-child(1){
    width:100%;
    background:url('../img/img1.jpg') no-repeat;
    background-position:center center;
    background-size:contain;
}
#container ul li:nth-child(2){
    width:100%;
    background:url('../img/img2.jpg') no-repeat;
    background-position:center center;
    background-size:contain;
}
#container  ul li:nth-child(3){
    width:100%;
    background:url('../img/img3.jpg') no-repeat;
    background-position:center center;
    background-size:contain;
}
</style>

<div id="thumnail_list">
    <div class="container">
        <ul>
            <li>
                <img src="./img/img1.jpg" alt="img1">
            </li>
            <li>
                <img src="./img/img2.jpg" alt="img2">
            </li>
            <li>
                <img src="./img/img3.jpg" alt="img3">
            </li>
        </ul>
    </div>
</div>


<div id="container">
    
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>

설치방법

1. Line1 : 제이쿼리를 설치 및 연결 합니다.

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

3. Line4 ~ 13 : 스크립트를 복사 그리고 붙여넣기 합니다.

4. Line17 ~ 62 : 스타일을 복사 그리고 붙여넣기 합니다. 기본 형식 입니다.

5. Line65 ~ 90 : html을 복사 그리고 붙여넣기 합니다. 기본 형식 입니다.

6. Line7 : 버튼 클릭시 동작 대상 입니다.

7. Line8 : 속도를 조절 합니다.

8. Line9 ~ 11 : 동작 완료 후 동작을 만들 수 있습니다.