맨 위로 가기 버튼 만들기, 자바스크립트 Scroll back to top

Back to top 또는 Scroll to top으로 불리는 위로 가기 버튼, 본문 내용이나 목록 페이지가 긴 경우 또는 무한 스크롤이 있는 페이지에서 마우스 스크롤 없이 버튼 클릭만으로 페이지 상단으로 이동하는 자바스크립트 코드로 방문자 편의 기능입니다.

디자인적인 요소보다는 자바스크립트 코드에 중점을 두었습니다.

html에 클릭하면 페이지 상단으로 이동하는 버튼을 만듭니다. 여기서는 이미지 대신 svg를 사용해 버튼색 변경이 유연하도록 하였습니다.

버튼의 크기는 button > svg width="38" height="38"을 조정해 줍니다.

HTML :

<button id="go-top"><svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" fill="currentColor"
  class="bi bi-arrow-up-circle-fill" viewBox="0 0 16 16">
  <path fill-rule="evenodd"
    d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z" />
</svg></button>

페이지 하단에 적당한 간격을 두고 고정될 수 있게 버튼 스타일을 만듭니다. color 속성을 통해 버튼 색상을 수정할 수 있습니다.

CSS Style :

#go-top {
  display: none;
  position: fixed;
  right: 30px;
  bottom: 50px;
  outline: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 9999;
  color: #3F51B5; /* 색상변경*/
}

자바스크립트 코드를 추가해 줍니다.

제이쿼리를 사용할 수 없는 경우를 대비해 순수 자바스크립트 코드로 작성하였습니다.

IE11 이하에서는 작동되지 않습니다. 크롬, 엣지, 웨일, 파이어폭스, 오페라 등 모던 브라우저에서만 정상 작동됩니다.

단, 화살표 함수를 일반 함수(function)로 변경하면 부드러운(smooth) 효과는 없지만 IE11에서도 작동합니다.

자바스크립트 :

var backToTop = () => {
  // Scroll | button show/hide
  window.addEventListener('scroll', () => {
    if (document.querySelector('html').scrollTop > 100) {
      document.getElementById('go-top').style.display = "block";
    } else {
      document.getElementById('go-top').style.display = "none";
    }
  });
  // back to top
  document.getElementById('go-top').addEventListener('click', () => {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth'
    });
  })
};
backToTop();

실행 모습은 데모 페이지 보기를통해 확인할 수 있으며 전체 코드는 깃허브 레파지토리에서 다운로드하거나 볼 수 있습니다.

순수 자바스크립트가 아닌 제이쿼리 라이브러리를 사용해야 한다면 아래 코드로 스크립트 코드를 변경합니다.

jQuery(document).ready(function () {
  $(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
      $('#go-top').fadeIn(500);
    } else {
      $('#go-top').fadeOut('slow');
    }
  });
  $('#go-top').click(function (e) {
    e.preventDefault();
    $('html, body').animate({scrollTop: 0}, 200);
  });
});

맨 위로 가기 버튼 만들기, 자바스크립트 Scroll back to top

티스토리툴바