똑같은 삽질은 2번 하지 말자
내가 원하는 노드(태그)로 자동 스크롤 하는 방법 본문
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'
});
}
}
};
'Javascript' 카테고리의 다른 글
Javascript ES6+ 에서 함수형 프로그래밍(평가, 일급, 일차함수, 고차함수) (0) | 2021.08.16 |
---|---|
Promise.all() 여러개의 비동기함수를 실행 (0) | 2021.08.04 |
URI에서 한글인식이 안될때, 특수문자를 데이터로 넣을 경우 (0) | 2021.04.17 |
javasciprt || && 연산자의 활용방법 (0) | 2021.03.30 |
Typescript 기본타입 (0) | 2021.02.02 |
Comments