통합검색

javascript

[Jquery] 메뉴 버튼 클릭 시 특정 위치로 스크롤 이동

 [!]HTML[/!]
 
<aside id="aside">
    <ul class="vam">
        <li class="active"><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
    </ul>
</aside>
<section class="_section">section1</section>
<section class="_section">section2</section>
<section class="_section">section3</section>



 [!]CSS[/!]
 
#aside {position: fixed;top: 0;bottom: 100px;right: 30px;font-family: empty;font-size: 0;text-align: center;}
#aside:before {display: inline-block;vertical-align: middle;content: '';width: 0;height: 100%;}
#aside .vam {display: inline-block;vertical-align: middle;}
#aside ul > li a {display: block;margin: 10px 0;font-size: 16px;color: #000;}
._section {min-height: 500px;}
._section:nth-child(odd) {background: #f1f1f1;color: #000;}




 [!]Jquery[/!]
 
//section target
section_target = {
    'init' : function(){
        this.action();
    },
    'action' : function(){
        //aside Active 처리
        var win = $(window);
        var sec = $('._section');
        var $aside = $('#aside');
        var $asideSlide = '#aside ul > li a';
        var ii = $('#aside li.active').index();
        var asideActive = $('#aside li');
        var wh = [];
        var secNum = 0;
        var spd = 600;

        sec.each(function(i){
            wh[i] = sec.eq(i).offset().top;
        });

        $(document).on('click',$asideSlide, function(e){
            var i = $(this).parents('li').index();
            var hh = $('#header').height();
            var pos = $('._section').eq(i).offset().top - hh;

            e.preventDefault();
            $('html,body').animate({
                'scrollTop' : pos
            },600,'easeInOutQuart');

            return false;
        });

        function acc(){
            asideActive.eq(secNum).addClass('active').siblings().removeClass('active');
            if(secNum==0){
                $aside.addClass('home-on');
            }else{
                $aside.removeClass('home-on');
            }
        }
        acc();

        win.on({
            'load scroll resize' : function(){
                var sh = parseInt($(this).scrollTop());

                for (i=0;i<sec.length;i++){

                    if(sh >= parseInt(wh[i]) - (win.height()/2)){
                        secNum = i;
                        acc();
                    }
                }

            }
        });



    }
}
$(function(){
    $(window).on({
        'load' : function(){
            if($('._section').length>0){
                section_target.init();
            }
        }
    });
})