🧡공부기록/javascript, jquery

[JQuery] 클릭시, 스크롤 부드럽게 이동

탱지 2023. 4. 14. 11:33
    /* scroll move event */
    //scroll move 
    $(".scroll_move").click(function(e){  

        e.preventDefault();       
        
        $('html,body').animate({scrollTop:$(this.hash).offset().top}, 1000);
    });

.scroll_move 클레스가 있는 요소를 클릭 시, 스크롤 부드럽게 이동

a 태그 안에 필수로 #아이디를 넣어야함 ! 

 

header가 fixed여서 본문을 조금 가린다면, 헤더 크기만큼 - 해주면 된다.

    $(".scroll_move").click(function(e){  
        var header_height = $('header').outerHeight(true);
        e.preventDefault();       
        $('html,body').animate({scrollTop:$(this.hash).offset().top - header_height}, 1000);
    });