[JS 포트폴리오 만들기] 상단바 버튼 누르면 해당 페이지로 스크롤하기

2022.03.18-19

 

---

🤔❓ 상단 메뉴버튼을 누르면 해당 페이지로 스크롤 되도록 만들고 싶다.

상단에 나열된 메뉴 버튼을 누르면 해당 페이지로 스크롤링 되도록 만들어보도록 한다.

 

---

😃❗메뉴 페이지의 좌표값을 구하여  상단 메뉴버튼에 연결시킨다.

 

0) 방법론을 찾아보자.

앞에서 스크롤링에 대해 알아봐서 그런지, 해당 property를 응용하면 될 것 같단 생각이 든다.

element.getBoundingClientRect().y를 이용해 메뉴페이지들의 y좌표를 구하고, scrollto를 이용해서 해당 y값을 연결시켜 주면 될 것 같다.

 

 

1) 각 메뉴 페이지의 좌표값을 구하자.

먼저, about의 y좌표를 구하기 위해 element.getBoundingClientRect().y를 이용하였다.

y는 viewport에서부터 content 좌측 상단 모서리까지 거리를 말한다.

const about = document.querySelector("#about");

document.addEventListener("scroll", () => {
  console.log(about.getBoundingClientRect().y);
});

콘솔로 확인해보니 #about content가 viewport에 닿으니 딱 0이 된다. padding을 포함한다.

 

그런데 결과를 확인해보니 페이지 상단이 상단바에 가리게 됨으로 viewport말고, 상단바를 기준으로 페이지가 스크롤링 되어야 한다. 

그래서, 상단바의 높이만큼을 차감시켜주면, 그만큼 덜 이동하게 될거라 생각하여 앞에서 만들었던 상단바의 높이만큼 차감해봤다.

 

const about = document.querySelector("#about");

document.addEventListener("scroll", () => {
  console.log(about.getBoundingClientRect().y - navbarHeight);
});

오, 상단바 바로 아래 y값이 0이 되도록 잘 구현된다. 그럼 이제 상단 메뉴버튼을 누르면 스크롤되는 기능을 적용시켜보자.

 

 

2) 상단 메뉴버튼에 각 페이지를 연결시키자

상단 메뉴버튼에 각 페이지를 연결하기 위해서는 어떻게 해야할까.

버튼마다 클래스가 지정되어 있지 않아서  각 메뉴별로 어떻게 이벤트를 연결시켜야할지 모르겠다.

그렇다고 각 버튼마다 클래스를 지정하는 방법은 아닌 것 같지만 일단 한번 시도해본다.

일단 생각나는 방법으로는 각 버튼마다 해당 페이지와 연결되는 'id'를 넣어서 해당 'id'가 속한 좌표로 이동시키는 것이다.

 

(1) window.scrollTo

window.scrollTo는 내가 입력한 좌표값만큼 딱 한번만 이동한다.

그래서 각 버튼마다 해당 페이지와 동일한 'id'를 html에서 넣어주고, 해당 id의 y좌표값을 찾아, ScrollTo로 연결시켰다.

 

gif

 

//1. html에서 각 버튼별로 id넣은 후 JS에서 불러온다.
const home = document.querySelector('#home');
const about = document.querySelector('#about');
const skillls = document.querySelector('#skills');
const work = document.querySelector('#work');
const tesimonials = document.querySelector('#testimonials');
const contact = document.querySelector('#contact');

//2. 해당버튼을 누르면 1에서 가져온 'id'가 속하는 페이지의 y좌표를 가져온다.
//3. 그리고 해당 y값에서 상단바 높이만큼 차감한 좌표값까지 스크롤하여 이동한다.
home.addEventListener("click", () => {
  const rect = home.getBoundingClientRect();
  scrollTo(0,rect.y - navbarHeight);
});

about.addEventListener("click", () => {
  const rect = about.getBoundingClientRect();
  console.log(scrollTo(0,rect.y - navbarHeight));
});

...

 

오, 버튼을 누르니, 위에서 지정한 페이지까지 잘 이동한다.

그런데 문제가 생겼다. 제멋대로 이동한다. 일관되지 않은이동...

 

(2) event.target

event

해답편에서 약간 힌트를 얻었다. 바로 event를 사용하는 방법이다.

각 메뉴버튼을 누르면 해당 메뉴버튼이 이벤트로 들어와 카운트가 올라가는 것을 볼 수 있다.

const navbarMenu = document.querySelector('.navbar__menu');
navbarMenu.addEventListener('click', (event) => {
  console.log(event);
});

 

event.target

그러면 내가 누른 버튼을 어떻게 '특정'시킬 수 있을까?

바로 event.target property를 사용하면 내가 이벤트를 발생시킨 그 객체가 반환된다.

const navbarMenu = document.querySelector('.navbar__menu');
navbarMenu.addEventListener('click', (event) => {
  console.log(event.target);
});

 

(3) data- 속성

최종적으로는 내가 누른 버튼에 해당하는 위치로 이동하고 싶은 것이므로, 버튼 내부에 해당 페이지와 연결되는 '정보'를 추가해주면 된다.

아, 결국에는 각 버튼마다 'id'를 추가하는 방법은 맞는 것 같다. 다만 도구가 다를 뿐.

 

data- 속성?

HTML의 데이터속성 (data-*)이라는 기능을 사용하여 각 버튼마다 'id'를 추가한다.

데이터속성은 특정요소와 연결되어 있지만 확정된 의미는 갖지 않는 속성이다. DOM과 같이 다른 속성의 조작 없이도 이용 가능하다.

뭔가 의미는 없지만 다른 문법과 '연결'시킬 때 사용하기 좋은 속성인 것 같다.

 

게다가 계속 변하는 정보도 저장할 수 있다. 그래서 display규칙을 사용하지 않고도 해당 효과를 만들 수 있다. (고 하는데 무슨소린지는 아직 잘 모르겠다.)

 

JS에서는 getAttribute() 또는 dataset 으로 해당 정보를 읽을 수 있다.

CSS에서도 역시 해당 정보를 읽어올 수 있다.

 

data-link라는 속성을 사용해보자

<ul class="navbar__menu">
  <li class="navbar__menu__item active" data-link="#home">Home</li>
  <li class="navbar__menu__item" data-link="#about">About me</li>
  <li class="navbar__menu__item" data-link="#skills">Skill</li>
  <li class="navbar__menu__item" data-link="#work">My Work</li>
  <li class="navbar__menu__item" data-link="#testimonials">Testimonial</li>
  <li class="navbar__menu__item" data-link="#contacts">Contact</li>
</ul>

HTML에 각 버튼마다 data- 속성을 사용해 'link'라는 곳에 해당 'id'들을 담아둔다.

 

const navbarMenu = document.querySelector('.navbar__menu');
navbarMenu.addEventListener('click', (event) => {

  const target = event.target;
  const link = target.dataset.link;
  
  console.log(event.target.dataset.link);
});

각 버튼의 id값을 반환하는 중

 

JS에서 data속성을 불러올 때는 앞에서 말한것 처럼 dataset을 이용하면 된다.

dataset안의 link를 불러오게 되면 위 그림과 같이 각 버튼의 id값을 반환해준다.

 

그런데 상단바 메뉴에서 data속성을 정의해주지 않은 부분을 누르게 되면 undefined로 뜨는 부분이 있다. 그래서 해당부분을 눌렀을 때 아무런 반응을 하지 않도록 처리해줘야 한다.

const navbarMenu = document.querySelector('.navbar__menu');
navbarMenu.addEventListener('click', (event) => {

  const target = event.target;
  const link = target.dataset.link;

  console.log(event.target.dataset.link);
  
  //link를 눌렀을 때 null (아무것도 들어있지 않다면) 그냥 return을 시킨다.
  //예외조건을 앞에서 처리해주고, else부분에 원하는 동작을 넣는다.
  if (link == null) {
    return;
  } else {
  };

 

요약하자면 event.target과 dataset의 조합을 통해 각 버튼의 'id'값을 불러올 수 있다.

 

 

(4) element.scrollIntoView()

버튼을 선택했을 때, 원하는 위치로 이동하기 위해서 나는 'id의 위치값 + scrollTo'를 이용했는데, 이것보다 더 간단한 방법이 있었다.

바로 scrollIntoView라는 속성인데 호출된 요소의 상위 컨테이너까지 스크롤링 해준다. 즉, id의 위치값이 없어도 id만 있다면 해당 위치까지 자동으로 스크롤해준다는 의미다.

 

컨테이너의 상단 또는 하단 등 어느위치로 이동시킬지 option을 통해 조정할 수 있다.

 

const navbarMenu = document.querySelector('.navbar__menu');
navbarMenu.addEventListener('click', (event) => {

  const target = event.target;
  const link = target.dataset.link;

  console.log(event.target.dataset.link);
  
  if (link == null) {
    return;
  } else {
    const scroll = document.querySelector(link);
    scroll.scrollIntoView({behavior:"smooth"}); //option으로 애니메이션을 smooth하게 만든다
  }
});

 

짠! 부드럽게 잘 이동한다.

 

 

그런데 상단바 바로 밑으로 오도록 만들고 싶은데 그건 scrollintoview로는 안되는걸까.

다른 기능들을 좀 더 정리해보고 테스트좀 해봐야겠다.

 

 

3) 그래서 hash table 형태의 함수를 사용하는게 아닐까. (시간복잡도를 (0)1로?!)

getBoundingClientRect도 그렇고 scrollIntoView도 그렇고 하나의 값에 접근하는 속성보다는

object형태로 묶어서 여러값에 접근하는 속성을 더 많이 이용하는 것 같다. (object형태에 접근해 그 안에서 옵션을 통해 원하는 값을 선택)

 

아무래도 더 빠른 코드를 위해서 위와 같은 hash table구조로 보이는 함수들을 사용하는 것 같다. 배열의 구조를 가진 Hash table(JS에서는 object)로 접근하게되면 시간복잡도가 (0)1이기 때문에 알고리즘 효율성이 매우매우 증가하기 때문이다.

 

좌표값을 찾는 함수들, 그리고 스크롤링하는 함수들이 꽤 있던데 이 중에서 위에 사용한 함수들이 비교적 '최근에'나온 함수이지 않을까 싶다. 이번에 공부하면서 다양한 함수들을 봤는데 너무 헷갈려서 각 함수들에 대해서도 정리를 해야겠다.

 

[헷갈리는 함수들]

- queryselector / getelementbyid

- scrollby / scrollto / scrollinto / scrollintoview

- getBoundingClientRect / 

 

 

---

eunne's github: https://github.com/eunne/Project_Portfolio.git