1 분 소요

자바스크립트로 메뉴바의 요소를 클릭하면 브라우저의 스크롤을 통해 특정 위치로 이동하는 기능을 구현하자.




1. 선행 학습

기능을 구현하기 전에 먼저 알아두어야 할 내용을 학습하자.


window.scroll()

브라우저의 스크롤을 특정 위치로 이동시키는 메서드이다.
사용 문법은 다음과 같다.

1. window.scroll(x좌표, y좌표)
2. window.scroll(options 객체)


options 객체란?

options는 아래의 매개변수를 포함하는 딕셔너리이다.

  • top: 스크롤할 Y축의 픽셀 수를 지정함
  • left: 스크롤할 X축의 픽셀 수를 지정함
  • behavior: 스크롤 동작을 설정함
    • auto: 연출 없이 바로 이동함 (기본값)
    • smooth: 부드럽게 스크롤함


위의 2가지 문법 중에서 2번 문법으로 실습해 보자.

HTML요소.offsetTop

offsetTop 속성은 해당 요소의 윗면이 브라우저 화면 최상단에서 떨어져 있는 거리를 반환해 주는 속성이다.




2. 기능 구현

위의 내용을 바탕으로 스크롤 기능을 구현하면 다음과 같다.

코드 예제

See the Pen 자바스크립트로 스크롤 구현 by blog dunku (@blog-dunku) on CodePen.


JavsScript 코드 설명

메뉴바 네비 요소의 onclick 이벤트에 각 콘텐츠의 윗면 좌표로 스크롤하는 메서드를 이벤트로 추가한다.

  1. spans 변수에 메뉴바의 네비 요소들을 저장한다.
  2. contents 변수에 실제 콘텐츠 요소들을 저장한다.
  3. topOne, topTwo, topThree 변수에 각 콘텐츠의 윗면 좌표를 저장한다.
  4. 각 네비 요소에 onclick 이벤트로 스크롤 함수를 작성하여 저장한다.
  5. 스크롤 함수는 window.scroll 메서드를 사용한다.
  6. window.scroll 메서드의 options 객체로 top 키에 이동할 위치인 topOne, topTwo, topThree 변수를 입력하고, behavior 키에 smooth를 입력하여 스크롤이 부드럽게 이루어지도록 한다.


TIP

  1. 상하 스크롤이 아닌 좌우 스크롤은 top 키 대신 left 키를 사용한다.
  2. behavior 키에 auto를 입력하면, 즉각 해당 위치로 이동한다.

참고