내가 원하는 노드(태그)로 자동 스크롤 하는 방법

setTimeout(() => {
  window.scrollTo({
    top:document.querySelector(".-account").offsetTop,
    left:0,
    behavior: 'smooth'});
})

document.querySelector(".-account").offsetTop => 해당 노드의 top 좌표를 가져온다

left: 0 -> x좌표는 0

smooth는 smooth하게

 

setTimeout으로 감싸준 이유는 이 코드가 실행되는 바로 전 단계에 내가 표시하고자 하는 노드가 돔에 삽입되는데,

그 코드가 확실하게 실행된 다음에 실행시키기 위해서 한번 대기 -> 큐 -> 스택으로 실행하고자 setTimeout을 걸었다.

 

혹시 사파리도 대응해야한다면 이하의 코드를 참조

var fnc_scrollto = function(to,id){
    var smoothScrollFeature = 'scrollBehavior' in document.documentElement.style;
    var articles = document.querySelectorAll("ul#content > li"), i;
    if (to == 'elem') to = articles[id].offsetTop;
    var i = parseInt(window.pageYOffset);
    if ( i != to ) {
        if (!smoothScrollFeature) {
            to = parseInt(to);
            if (i < to) {
                var int = setInterval(function() {
                    if (i > (to-20)) i += 1;
                    else if (i > (to-40)) i += 3;
                    else if (i > (to-80)) i += 8;
                    else if (i > (to-160)) i += 18;
                    else if (i > (to-200)) i += 24;
                    else if (i > (to-300)) i += 40;
                    else i += 60;
                    window.scroll(0, i);
                    if (i >= to) clearInterval(int);
                }, 15);
            }
            else {
                var int = setInterval(function() {
                    if (i < (to+20)) i -= 1;
                    else if (i < (to+40)) i -= 3;
                    else if (i < (to+80)) i -= 8;
                    else if (i < (to+160)) i -= 18;
                    else if (i < (to+200)) i -= 24;
                    else if (i < (to+300)) i -= 40;
                    else i -= 60;
                    window.scroll(0, i);
                    if (i <= to) clearInterval(int);
                }, 15);
            }
        }
        else {
            window.scroll({
                top: to,
                left: 0,
                behavior: 'smooth'
            });
        }
    }
};