반응형 홈페이지 만들기 - 008

**[공지사항]** [개인적인 공부를 위한 내용입니다. 오류가 있을 수 있습니다.]

[반응형 홈페이지 만들기-008]

하단에서 화살표 아이콘 클릭 시 최상단으로 이동(BackToTop) 기능 구현

index.html내 body 종료 태그 바로 위에 아래와 같이 작성한다.

<footer>
  <div class="inner">
    <div class="footer-message">진실로 새로워지기 위해서는, 날마다 새로워야 하고 또 새로워야 한다.[일신우일신(日新又日新)]</div>
    <div class="footer-contact">gmkim71@gmail.com</div>
    <div class="footer-copyright">Copyright 2022 © All rights reserved.</div>
  </div>
</footer>
<a id="backtotop" class="show"></a> 
<!-- backtotop 아이콘을 css에서 만들었지만 그냥은 보이지 않는다.
     또한 스크롤 다운을 해서 아이콘이 보일때 그에 대한 디자인 등 세팅값 적용을 위해 class명을 show로 적용하였다.
     class명 show는 클릭 시 최상단으로 이동하는 기능이 자바스크립트에서 구현할 때 
     그 코드 內 show 클래스를 add해서 구현할 예정이기에 기능 구현 완료 후에는 삭제해도 된다. -->
<script src="js/main.js"></script>
</body>
</html>

style.css는 아래와 같이 작성한다.

#backtotop { /* id 호출은 #으로 */
  background-color: rgb(47, 48, 89);
  width: 40px;
  height: 40px;
  text-align: center;

  border-radius: 20px; /* 정사각형인 박스의 border-radius를 중간값을 적용해주면 원이 된다. 여기서는 20px */
  position: fixed; /* 고정해야 하며 따라서 아래의 위치값이 필요함 */
  bottom: 30px;
  right: 30px;
  transition-property: background-color, opacity, visibility; /* 약간의 움직임 효과를 주기 위함 */
  transition-duration: 0.3s, 0.5s, 0.5s;
  opacity: 0; /* 투명도를 0으로 */
  visibility: hidden;  /* 맨처음에는 안보이게끔한다. */
  z-index: 999;  /* 이 박스(아이콘)가 보여지게 되면 최상단에 보여져야 한다는 의미로 999 적용 */
}

/* 아이콘을 만들고자 할 때 적용 방법
  1. ::after (요소 뒤에 content 추가) 가상 요소에서,
  2. content: "폰트어썸 유니코드" 를 넣고,
  3. font-family: FontAwesome 이라고 넣으면 됨
  */
#backtotop::after { /* 즉 위에 정의한 backtotop의 뒤에 적용할 가상 요소라는 의미임 */
  content: "\f077";  /*  폰트어썸 유니코드를 넣을때 앞에 역슬래쉬[\]를 꼭 넣어줘야 한다. */
  font-family: FontAwesome;
  font-size: 1.5rem;
  line-height: 40px; /* 아이콘을 중간에 놓으려면 line-height를 backtotop의 height값과 동일하게 적용 시 수직 정렬됨  */
  color: #fff;
}

#backtotop.show:hover {
  cursor: pointer; /* 커서를 손모양으로 바꾸기 */
  background-color: #2186c4; /* 컬러를 바꾸기 */
}

#backtotop.show {
  opacity: 1; /* 불투명 100%로 backtotop이 보여진다 */
  visibility: visible; /* 보이게한다. */
  background-color: rgb(47, 48, 49);
}

backtotop 아이콘은 화면이 가장 상단으로 올라와 있는 경우에는 화면에서 보여질 필요가 없고
스크롤 다운이 된 경우에 보여지게끔 기능을 구현한다. 또한 클릭 시 화면은 최상단으로 이동되어져야 되고
아이콘은 사라져야 한다.
이러한 기능을 구현하기 위해서는 자바스크립트를 사용해야 한다.
js 폴더 內 main.js를 생성하고 아래와 같이 작성한다.

const backToTop = document.getElementById('backtotop');

// 아래 내용은 화면의 위치가 최상단인지 아닌지를 파악하여 상단이면 아이콘이 안보이게 상단이 아니면 아이콘이 보이게 하는 기능 구현
function checkScroll() {  // 함수가 2개 이상의 호출이 발생 할 경우 이렇게 선언하는게 더 쉽게 구분이 가능 
// const checkScroll = () => {
    /*
      웹페이지가 수직으로 얼마나 스크롤되었는지를 확인하는 값(픽셀 단위로 반환)
      https://developer.mozilla.org/ko/docs/Web/API/Window/pageYOffset
    */
    let pageYOffset = window.pageYOffset;

    if (pageYOffset !== 0) { //스크롤값이 0이 아니면(최상단이 아닌 스크롤이 내려가 있는 경우를 의미)
        backToTop.classList.add('show'); // backToTop에 show 라는 class를 추가하라는 의미이며 show 세팅은 css에서 이미 해놓음
    } else {  //스크롤값이 0이면(최상단을 의미)
        backToTop.classList.remove('show'); // show 클래스를 삭제하라는 의미로 보여졌던 아이콘이 사라지게 한다.
    }

}

// 아래 내용은 중간이나 하단에 스크롤이 위치하다가 아이콘을 눌렀을 때 상단으로 이동시키는 기능 구현
function moveBackToTop() {  // 함수가 2개 이상의 호출이 발생 할 경우 이렇게 선언하는게 더 쉽게 구분이 가능 
// const moveBackToTop = () => {
    if (window.pageYOffset > 0) {  // pageYOffset이 0보다 크다는 의미는 스크롤바가 조금이라도 하단으로 내려가 있는 상태를 의미
        /*
        smooth 하게 스크롤하기
        https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTo
        */
       window.scrollTo({top: 0, behavior: "smooth"}) // top은 최상단으로, smooth는 부드럽게 작용하라는 의미
    }
}

window.addEventListener('scroll', checkScroll);
backToTop.addEventListener('click', moveBackToTop);

크롬 브라우저에서 개발자도구[f12]를 열어 source를 클릭하고 왼쪽 page에서 main.js를 누르면 자바스크립트 화면이 보여진다.
이 화면은 디버깅을 해 줄 수 있는 화면이고 해당 문장번호 옆을 클릭하여 breaking point를 설정해서 그 부분까지 작동시킬수 있고
또한 관계된 변수값 등을 출력 및 확인해볼 수 있다.

위의 내용을 모두 적용하여 실행하면 아래 화면에서 기능을 확인할 수 있다.