[JS] 클릭으로 원하는 페이지로 이동하기

scrollIntoView() 메소드를 이용하여 원하는 페이지로 이동할 수 있다

이동 전

이동 후

요소의 상위 컨테이너에 스크롤되어 이동하기 때문에 메뉴가 top:0 에 fixed 되어 있으면 컨텐츠가 메뉴 height 값만큼 가려져서 안보인다.

HTML

<section id="menu">
      <div class="menu__logo">logo</div>
      <ul class="menu__categories">
        <li class="menu__items" 
            data-key="#home">Home</li>
        <li class="menu__items" d
            ata-key="#about">About me</li>
        <li class="menu__items" 
            data-key="#skill">Skills</li>
        <li class="menu__items" 
            data-key="#work">My work</li>
        <li class="menu__items" 
            data-key="#contact">Contact</li>
      </ul>
    </section>

    <div id="home" class="section">Home</div>
    <div id="about" class="section">About me</div>
    <div id="skill" class="section">Skills</div>
    <div id="work" class="section">My work</div>
    <div id="contact" class="section">Contact</div>
  </body>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
body {
  background-color: #333;
  min-width: 600px;
  height: 3000px;
}
#menu {
  display: flex;
  justify-content: space-between;
  background-color: yellow;
  transition: all 300ms ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
#menu.active {
  background: transparent;
  color: yellow;
}
.menu__logo {
  width: 100px;
  height: 60px;
  background-color: tomato;
  color: white;
  text-align: center;
  line-height: 60px;
}
.menu__categories {
  display: flex;
  align-items: center;
}
.menu__items {
  margin-right: 30px;
}

.section {
  width: 600px;
  height: 500px;
  background: white;
  text-align: center;
  margin: auto;
  margin-bottom: 50px;
  line-height: 500px;
  font-size: 70px;
}

JS

const menuCategory = document.querySelector('.menu__categories');
menuCategory.addEventListener('click', (e) => {
  //   console.log(e.target.dataset.key);
  const target = e.target;
  const menuKey = target.dataset.key;
  if (menuKey == null) {
    return;
  }
  const scrollMenu = document.querySelector(menuKey);
  scrollMenu.scrollIntoView({ behavior: 'smooth' });
});

1. (주목) scrollIntoView() 메소드는 element 인터페이스의 메소드이다.
   • 지정하려는 element(여기서는 id값)을 menuCategory 라는 변수에 담아 가져온다.
2. HTML Data Attribute 속성을 이용하기
   • 클릭하여 이동시켜줄 text 영역과 이동할 content 영역에 id값을 동일하게 지정하여 데이터를 연결 시켜준다.
3. (조건) text 영역이 아닌 여백에 클릭했을 때는 반응하지 않고 return하여 종료한다.
4. scrollIntoView()메소드를 연결하여 클릭했을 때 원하는 페이지로 이동하는 지 확인한다.
5. 옵션값 지정 : {behavior: "smooth"};
   • 보다 자연스럽게 이동할 수 있도록 옵션 값을 추가했다.