[CI4]HTML 특정 태그 위치로 스크롤 이동하기.

<div id="anchor_1">
	여기로 이동됩니다.
</div>

<button class="btn btn-primary" data-anchor="anchor_1" onclick="scrollEvent(this)">
	이걸 클릭하면요
</button>

내용은 정말 간단하다.

function scrollEvent(_params, speed) {
        let anchor_id = $(_params).attr('data-anchor');
        if( !speed ) var speed = 'slow';
        var a_tag = $("#"+anchor_id);
        if(a_tag.length > 0){
            $('html, body').animate({
                scrollTop: a_tag.offset().top
            }, speed);
        }
    }

 

원형 코드와 다르게, 나에게 맞게 수정을 진행하였다.

 

원형 코드

https://web.webmini.net/anchor_tab_scroll

버튼 클릭시 원하는 곳으로 이동하기(스크롤 위치 기억) - 웹미니 : 웹속의 작은 공간

변형 참조코드

https://jjyloves.tistory.com/25

[JQuery] 제이쿼리로 해당 위치로 이동시키기