개인공간

[제이쿼리] 해시(hash)태그 사용하여 앵커이동 load, click, scroll 이동되게 처리 본문

IT정보/jQuery_javaScript

[제이쿼리] 해시(hash)태그 사용하여 앵커이동 load, click, scroll 이동되게 처리

천재소년s 2023. 7. 12. 15:27
반응형

예제확인방법 바로가기 >>

innerLink1 innerLink2 innerLink3 innerLink4
innerLink1
innerLink2
innerLink3
innerLink4

CSS

.innerLink{position:relative;z-index:1;}
.innerLink .inner{overflow:hidden;position:static;}
.innerLink.fixed .inner{position:fixed;}

HTML


    

        innerLink1
        innerLink2
        innerLink3
        innerLink4
    





    innerLink1




    innerLink2




    innerLink3




    innerLink4

JS

function targetMove2(e){
    var stickyObj = $('.innerLink230712');
    var headerH = $('.cconWrap_header').innerHeight() + $('.cconWrap_tab').innerHeight(); //header가 fix된 경우 
    var stickyH = stickyObj.find('.inner').height();
    if(e.type == 'load'){  //load일때
        if(location.hash != ''){
            var _id = location.hash;   
            var _top =  $(_id+'-area').offset().top - headerH - stickyH;
        }
    }else{ //click일때
        var _id = $(this).attr('href');
        var _top =  $(_id+'-area').offset().top - headerH - stickyH;
    };
    if(_top != undefined){
        $("html, body").stop().animate({scrollTop:_top}, 400);   
    }
}
function targetMove(e){
    var stickyObj = $('.innerLink230712');
    var headerH = $('.cconWrap_header').innerHeight() + $('.cconWrap_tab').innerHeight(); //header가 fix된 경우 
    var stickyH = stickyObj.find('.inner').height();
    if(e.type == 'load'){  //load일때
        var _id = location.hash;   
    }else{ //click일때
        var _id = $(this).attr('href');
    };
    var _top =  $(_id+'-area').offset().top - headerH - stickyH;
    stickyObj.addClass('fixed');            
    $("html, body").stop().animate({scrollTop:_top}, 400);   
}

function fixWidhtHeight(){
    var stickyObj = $('.innerLink230712');
    var fixWidth = $('#content-inner').innerWidth(); // content사이즈
    var fixHeight = $('.innerLink230712 a').innerHeight();
    stickyObj.find('.inner').width(fixWidth);
    stickyObj.height(fixHeight);
};

function scrollSticky(){
    var stickyObj = $('.innerLink230712');
    if(stickyObj.offset().top - stickyObj.find('.inner').height()  < $(window).scrollTop()) {
        stickyObj.addClass('fixed');
        stickyObj.find('.inner').css('top', $('.ktd-conWrap header').innerHeight() + $('.ktd-tab').innerHeight())
    }else{
        stickyObj.removeClass('fixed');
        stickyObj.find('.inner').css('top', 0)
    }
}
//스크롤 애니메이션
$(window).scroll(scrollSticky);
$(window).on('load', targetMove);
$('.innerLink230712').on('click', targetMove);
$(window).on('resize', fixWidhtHeight);
fixWidhtHeight();
반응형

'IT정보 > jQuery_javaScript' 카테고리의 다른 글

[제이쿼리] fixed였던 오브젝트 스크롤 하단 특정위치에 고정시키기  (0) 2023.07.12
[제이쿼리] 기본 가로스크롤 선택요소 중앙정렬 & 스크롤에 따른 처음과 끝 버튼 처리 PC와 M버전별  (0) 2023.01.17
자바스크립트 팁 #1, This 제대로 알고가자 (this와 window 객체, new )  (0) 2023.01.06
[제이쿼리] 풀페이지 스크롤 플러그인  (0) 2023.01.03
[제이쿼리] scroll 반정도왔을때 animation처리 하기  (0) 2022.10.06
'IT정보/jQuery_javaScript' Related Articles more