퀵 네비게이션, 화면 스크롤 이동 제어

- 퀵 네비게이션

- 고정 네비게이션, 해당 위치로 스크롤

 

해당 위치 이동 스크립트

<script>

        $(function(){ // jQuery 시작

            var h_top; //각 콘텐츠 영역 top값

            var box_id;

            var $navi = $('#navi > ul > li');

            $navi.eq(0).addClass('on');

            

            $navi.click(function(){

                box_id = $(this).find('a').attr('href');//책갈피 이름

            

                h_top = $('#wrap '+box_id).offset().top-50;

                

                $('html, body').animate({

                    scrollTop : h_top

                },400);

                

                return false;

            });

            

           var pos= true;

$(window).trigger('scroll');

var home_h = $('#home').height() - $('#top').height(); 

            /* gotop 버튼 보이게 */

            var offset = 200;

            

            $(window).scroll(function(){

                var st = $(this).scrollTop();

                

                if(st > offset){

                    $('.go_top').fadeIn(500);

                }else{

                    $('.go_top').fadeOut(500);

                }

 

if(st > home_h){

if(pos==false){

$('#top').css({opacity:0});

}

$('#top').css({position:'fixed',top:0,bottom:'auto'});

$('#top').stop().animate({opacity:1},500);

pos= true;

} else{

$('#top').css({position:'absolute',top:'auto',bottom:0});

$('#top').css({opacity:1});

pos= false;

}

 

                

                //각 콘텐츠에 도달시 해당 메뉴 활성화

                $('#wrap > div').each(function(){

                   var i = $(this).index(); 

                    

                    if($(this).offset().top - 50 <= st){

                        $navi.removeClass('on');

                        $navi.eq(i).addClass('on');

                    }

                });//end:each

                

                //마지막 콘텐츠의 세로 길이가 화면의 세로 길이보다 작은 경우 마지막 콘텐츠로 활성화 시킴

                if(st >= ($('#wrap').height() - $(window).height())){

                    $navi.removeClass('on');

                    $navi.eq($navi.length - 1).addClass('on');

                }

                

            });//end:scroll

            

            //go_top클릭시 화면 맨위로 스크롤

            $('.go_top').click(function(){

                $('html, body').animate({

                    scrollTop : 0

                },500);

                

                return false;

            });

            

            

        }); // jQuery 종료

    

    </script>