JQuery 한화면 단위별 스크롤 이동

JQuery 한화면 단위별 스크롤 이동

워드프레스 해 JQuery 를 이용하여 화면단위 마우스 스크롤 이동 기능 추가하기

한 화면 단위로 구성된 섹션을 가지고 있습니다. 각 섹션은 .section 클래스로 지정되어 있으며, 각각의 섹션은 전체 화면(100vh)의 높이를 가지고 있습니다.

JQuery를 사용하여 스크롤 이벤트를 감지하고, 마우스 휠을 위로 또는 아래로 스크롤할 때 다음 섹션 또는 이전 섹션으로 스크롤 이동하도록 구현되어 있습니다. 스크롤 다운 시 scrollTop을 다음 섹션의 상단 위치로 이동시키고, 스크롤 업 시 scrollTop을 이전 섹션의 상단 위치로 이동시킵니다.

아래 해당 부분을 functions.php 파일에 추가한다.

add_action('wp_head', 'my_wp_head');
function my_wp_head(){
?>
    
        
<?php
};

var elm = ".main_content_size"; 이분에 관련된 calss  값을 대입하여 사용하고 관련 페이지의 높이값은 css style에 업데이트하여 사용함.

.main_content_size {
    height: 100%;
    display: flex !important;
    flex-direction: row;   
    overflow: hidden;
}

div#menu01, div#menu02, div#menu03, div#menu04, div#menu05{
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 966px;
}