[JS]지정된 위치로 스크롤 내려가게 하는 메뉴

클론 코딩을 하던 중, 상단 메뉴를 클릭하면 아래쪽에 원하는 위치까지 자동으로 스크롤이 내려가게 하는 기술을 습득했다. 세로로 긴 페이지를 쓰게 되면 분명 필요할 것이다. 제작한 상단 메뉴는 다음과 같다.

 

• gsap을 쓰기 때문에 깔려 있어야 됨. 

상단의 메뉴. 누르면 아래쪽 해당 부분까지 스크롤 되어 내려간다.

<div class="scroll-menu">
    <ul>
      <li class="on" data-target="history-list">연혁</li>
      <li data-target="chairman-list">역대학장</li>
      <li data-target="chairman-list02">역대 부학장</li>
    </ul>
  </div>

scroll-menu에는 위와 같이 세 가지 메뉴가 들어있다. 같은 디자인이기에 ul의 li 구조로 만들어졌으며, 각 li마다 class로 on이 달리면 배경이 파랗게 되고 글자가 하얀 색이 되도록 css 처리를 해둔 상태다. data-target에 대해서는 아래서 설명, 일단 각 파트를 담은 id로 적어뒀다.

 

<script>
  const scrollMenu = $(".scroll-menu li");
  scrollMenu.on("click", function () {
    $(this).addClass("on");
    const target = "." + $(this).data("target");
    const position = $(target).offset().top - 120;
    const siblings = $(this).siblings();
    siblings.removeClass("on");
    gsap.to(window, { duration: 2, scrollTo: position, ease: "power4" });
  });
</script>

우선 scrollMenu를 찾아주고, click 이벤트가 일어날 때 어떤 일이 발생할지 함수로 정해준다.

이 경우 먼저 $(this).addClass("on")을 통해 click이 일어날 때 해당 list에 on 클래스를 달아달라고 했다. 위에 말한 대로 이미 on이 달린 순간 배경색이 변하게 css처리를 해둔 상태이기에, 클릭과 동시에 파랗게 변하는 모습을 볼 수 있다.

이후 const siblings = $(this).siblings(); 와 siblings.removeClass("on");으로 클릭되지 않은 list에 붙은 on클래스는 떨어지도록 해두었다.

 

const target = "." + $(this).data("target");

const position = $(target).offset().top - 120;

이걸로 위치 찾고 타겟에 이름 찾아오고.... 

 

- 120을 한 건 헤더의 높이가 120이라, 내려올 때 이것까지 인식해버려서! 깔끔하게 보이려면 120을 - 해줘야 잘 보인다. 

 

마지막으로 gsap.to(window, { duration: 2, scrollTo: position(이미 const로 정의한 타겟의 위치), ease: "power4"})를 통해 gsap으로 부드럽게 해당 위치까지 이동하겠다고 지정해준다. 

 

여러 단계를 거쳐야 하지만 분석해보면 그렇게 어렵진 않다.