[TIL] 팀 : 소개 페이지2

✨ 자기소개 페이지 만들기

문제점

1. 새로고침 시 중간 페이지로 자꾸 스크롤이 고정되는 이슈 발생
   JS/시맨틱 태그 모두 점검 하였으나 계속 같은 문제 발생

<input type='text' autofocus>

autofocus : 이 부분이 자동으로 스크롤을 고정하게 하는 거라고 다른 조원 분들이 찾아주심

2. css { scroll-behavior: smooth; } 과 Top버튼의 js 파일 스크립트 활용시 늦게 올라가는 상황 발생

const scrollTop = function () {
  const scrollBtn = document.createElement("button");
  scrollBtn.innerHTML = "↑";
  scrollBtn.setAttribute("id", "btn-top");
  document.body.appendChild(scrollBtn);
  const scrollBtnDisplay = function () {
    window.scrollY > window.innerHeight
      ? scrollBtn.classList.add("show")
      : scrollBtn.classList.remove("show");
  };
  window.addEventListener("scroll", scrollBtnDisplay);
  const scrollWindow = function () {
    if (window.scrollY != 0) {
     // setTimeout(function () { 
     //   window.scrollTo(0, window.scrollY - 50);
     //   scrollWindow();
     // }, 10);
      
     //setTimeout의 코드를 scrollBy로 바꾸어 주었다
      window.scrollBy({ top: wrap.getBoundingClientRect().top, behavior: 'smooth' });
    }
  };
  scrollBtn.addEventListener("click", scrollWindow);
};
scrollTop();

scrollBy : 창에 있는 문서를 지정된 양만큼 스크롤

(출처 : Window.scrollBy() )