[wordpress] Fusion Builder의 menu anchor 기능으로 해결 안될 때

박스를 클릭 시 박스에 해당되는 내용으로 스크롤이 이동되게 하는 기능은 퓨전빌더의 menu anchor 기능으로 어느부분 소화가 가능하다.

하지만 아래와 같이 홈페이지 스크롤 시 헤더 부분이 고정된다면, 고정된 헤더 부분의 높이만큼 가려져서 해당내용이 잘려보이는 현상이 발생한다. 

따라서 별도의 스트립트가 필요한 상황이다. 

1. 해당 페이지의 Code Block를 추가하여 아래의 코드를 추가한다.

(직접 짠 코드입니다. 사용할 경우 출처를 밝혀주세요!)

< script type = "text/javascript" >

/*

* Author : jsChoi

* CreatedDate : 20181122

*/

//page scroll function

function clickOnPage(menuIndex) {

jQuery('.booth-page').each(function (pageIndex) {

if (menuIndex === pageIndex) {

var pageScroll = Math.floor(jQuery(this).offset().top);

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

scrollTop: pageScroll - 200

}, 400);

}

});

}

jQuery(document).ready(function () {

    jQuery('.booth-menu').on('click', function () {

        var menuIndex = jQuery('.booth-menu').index(this);

        clickOnPage(menuIndex);

    });

});

</script>

** 참고 : Wordpress 테마 별로 제이쿼리 인식하는 부분이 조금씩 다르다. 

Avada 테마일 경우 $ 대신 jQuery로 사용해야 인식된다. **

2.아래의 클래스를 해당하는 곳에 각각 넣어준다.

booth-page -> 해당 위치 클래스 booth-menu -> 메뉴 클래스