자바스크립트 부드러운 스크롤 이동(+jQuery)

 

 

 

부드러운 스크롤 이동

---

이전 HTML <a> 태그 id 값을 사용해 스크롤 이동 구현 방법을 포스팅했습니다. <a> 태그를 사용할 경우 

이 번에는 자바스크립트와 제이쿼리를 따로 구분해서 구현해보도록 하겠습니다.

 

[HTML/CSS] 부드럽게 스크롤 영역 이동하기

 

자바스크립트와 제이쿼리를 따로 나누어 구현하는 이유는 크로스브라우징 문제 때문입니다. 자바스크립트는 사파리에서 기능 작동하지만 부드럽게 이동하지 않고 <a> 태그를 사용한 것처럼 이동합니다. 그래서 제이쿼리를 사용하는 경우가 많습니다.

 

 

자바스크립트

---

See the Pen 자바스크립트 부드러운 스크롤 이동 by junheeleeme (@junheeleeme) on CodePen.

 

 

 

 

스크롤 이동을 위한 자바스크립트 코드는 아래와 같습니다.

 

const top = 1000;

window.scroll({top : top , behavior: 'smooth'});

 

window.scroll Web API를 사용합니다. y축에 해당하는 top을 1000으로 잡았다면 1000px 만틈 스크롤이 내려가게 됩니다. 하지만 유동적인 DOM 대상의 위치를 잡아야 할 경우 아래와 같이 해당 target 요소의 절대 위치를 구해 사용합니다.

 

const target = document.querySelector('.target'); //타겟
const target_top = target.getBoundingClientRect().top; //타겟 절대위치

window.scroll({top : target_top, behavior: 'smooth'}); //스크롤 이동

 

크롬 브라우저에 경우 부드럽게 잘 이동하지만 사파리는 부드럽게 이동하지 않고 바로 이동하게 됩니다. 모든 브라우저에서 부드럽게 구현하려면 제이쿼리를 사용하는 편이 좋습니다.

 

 

제이쿼리

---

See the Pen 제이쿼리 부드러운 스크롤 이동 by junheeleeme (@junheeleeme) on CodePen.

 

 

 

 

 

const top = 1000;
const speed = 500;

$('html, body').animate({
      scrollTop: top 
   }, speed);

 

스크롤 속도는 speed 값을 적절히 조절해 사용하면 됩니다.