클릭 > 스크롤 to 아이디 요소

마우스 클릭 이벤트 발생 시 특정 아이디나 클래스를 가진 요소로 스크롤시키기

ex) 우커머스 탭 메뉴에서 전체 탭 컨텐츠를 다 노출 후, 탭 버튼으로 각 탭의 컨텐츠 위치로 이동시키는 경우

jQuery(document).ready(function () {

    $('.reviews_tab').on('click', function () {
        //  $(this).hide();
        $('html, body').animate({
            scrollTop: $("#tab-reviews").offset().top - 80   // 80은 상단 여백을 고려한 임의값
        }, 500);
    });
    $('.vendor_ratings_tab_tab').on('click', function () {
        $('html, body').animate({
            scrollTop: $("#tab-vendor_ratings_tab")
                .offset()
                .top - 80
        }, 500);
    });
    $('.description_tab').on('click', function () {
        $('html, body').animate({
            scrollTop: $("#tab-description")
                .offset()
                .top - 80
        }, 500);
    });
    $('.seller_info_tab').on('click', function () {
        $('html, body').animate({
            scrollTop: $("#tab-seller_info")
                .offset()
                .top - 80
        }, 500);
    });

});

Script Snippet